一.Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
1.让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容
2.flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
3.flex包括六个属性
flex-direction:flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-wrap:如果一条轴线排不下,如何换行(nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。)。
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content:定义了项目在主轴上的对齐方式。
align-items:align-items属性定义项目在交叉轴上如何对齐。
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
二.详解justify-content属性
1.基线对齐
justify-content: baseline;
2.分配弹性元素方式
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 (每个项目两侧的间
隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。)*/
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小
如果项目未设置高度或设为auto,将占满整个容器的高度。*/
三.div,span等标签不能直接获取焦点,可以通过:“:focus+span”获取焦点
10月29号
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
51c大模型~合集29大模型
-
kafka管理工具Confluent
文章目录一、Kafka读取__consumer_offsets1.创建topic “test”:2.使用kafka-console-producer.sh脚本生产消息:3.验证消息生产成功:4.创建一个console consumer group:5.获取该consumer group的group id:6.查询__consumer_offsets topic所有内容:7.计算指定consume
kafka管理工具Confluent kafka __consumer_offsets AdminClient apache