flex语法

一.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”获取焦点

 

标签：flex,元素,语法,justify,wrap,content,属性
来源： https://www.cnblogs.com/WhiteGardenia/p/15483783.html