CSS布局系列三：flex布局

概念

弹性盒子由容器和子元素组成。

容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

子元素(flex item)：容器中的每个单元称为子元素

容器中存在两条多轴：主轴（默认水平方向）和侧轴（默认垂直方向）

设置容器的属性

• flex-direction：设置容器主轴的方向

1. row(默认值)：横向布局（主轴水平），起点在左端
2. row-reverse：横向布局（主轴水平），起点在右端
3. column：纵向布局（主轴垂直），起点在上端
4. column-reverse：纵向布局（主轴垂直），起点在下端

• flex-wrap：设置容器中元素如何换行

1. nowrap(默认值)：不换行
2. wrap：空间不够的话自动换行，第一行在上方
3. wrap-reverse：空间不够的话自动换行，第一行在下方

• flex-flow：flex-direction和·flex-wrap的简写形式。
• justify-content：设置容器中元素在主轴上的对齐方式

1. flex-start：默认值，与父容器左端靠齐
2. flex-end：与父容器右端靠齐
3. center：在主轴居中
4. space-between：第一个子组件位于容器最左端，最后一个子组件位于容器最右端，然后平均分配在容器水平方向上
5. space-around：所有子组件平均分配在父容器的水平方向上，左右都有留空隙

• align-items：设置容器中元素在侧轴多层上的对齐方式。
• align-content：设置容器中元素在侧轴多层上的对齐方式。

1. normal：默认值
2. flex-start：flex容器起点
3. flex-end：flex容器重点
4. center：居中

• row-gap：设置子元素的行间距

• column-gap：设置子元素的列间距

• gap: row-gap和column-gap的简写形式。

设置子元素的属性

• flex-basis：设置元素的宽度
• order：设置元素顺序，值越小越靠前
• align-self：设置元素对齐方式
• flex-grow：设置元素放大比例
• flex-shrink：设置元素缩小比例
• flex：flex-grow, flex-shrink 和 flex-basis的简写

注意事项

1. 设置了display:flex后，元素的float、clear和vertical-align属性将失效
2. flex:1即为自适应

 系列

CSS布局系列一：标准、浮动、定位_betty_grant的博客-CSDN博客

CSS布局系列二：table布局_betty_grant的博客-CSDN博客

CSS布局系列三：flex布局_betty_grant的博客-CSDN博客

CSS布局系列四：网格布局_betty_grant的博客-CSDN博客