最易理解的flex布局讲解

flex布局

介绍：flex布局意为弹性布局，在flex容器中默认存在两条轴，水平的主轴(main-axis)和垂直的交叉轴(cross axis)

父容器的属性

1、flex-direction 设置主轴的方向(默认为X轴)

• row(默认值)：主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

2、flex-wrap 设置是否换行显示

• nowrap(默认值)：不换行

• wrap：换行，第一行在上方

• wrap-reverse：换行，第一行在下方

3、flex-flow：主轴方向&是否换行的简写

• flex-flow: row nowrap (默认)

4、justify-content 主轴上的对齐方式

• flex-start(默认值): 左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之前的间隔都相等
• spance-around：每个项目两侧间隔相等
• space-evenly：项目之间和项目与容器之前间隔相等

5、align-items 交叉轴上的对齐方式

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：在交叉轴上居中对齐
• baseline：项目中第一行文字基线对齐
• stretch(默认)：若项目未设置高度或设为auto,将占满整个容器的高度

6、align-content 多根主轴线在垂直方向上的对齐方式

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：在交叉轴上居中对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• spance-around：每根轴线两侧间隔相等
• stretch(默认)：轴线占满整个交叉轴

项目属性

1、order 项目的排列顺序，值越小越靠前，默认为0

2、flex-grow 定义项目的放大比例，默认为0

3、flex-shrink 定义项目的缩小比例，默认为1

4、flex-basic 设置项目的宽度，默认为auto时，项目会保持默认宽度

5、flex : flex-grow、flex-shrink、flex-basis 三个属性的缩写

6、align-self 单个项目的对齐方式，可覆盖父容器设置的align-items属性，默认值auto