flexbox布局详解

申明：以下都是个人整理，如有错误之处，请指正，谢谢！

flexbox——一维布局模型，只能处理一个维度（行或者列）上的布局。由flex-container（flex容器）和flex-item（flex元素）构成，为flex-item（flex元素）之间提供了强大的空间分布和对齐能力。

弹性布局是指通过调整flex-item的宽高，从而在任何显示设备上实现对可用显示空间最佳填充能力，要理解flexbox，需要先理解以下概念：

1 flex容器（弹性容器）

flex container：父级元素设置display:flex;或者display:inline-flex;属性，将容器变为flex容器。

flex item：flex容器的所有直接子元素自动成为flex项。

主轴（main axis）：flex item依次排列的轴为主轴。

交叉轴（cross axis）：垂直于主轴的轴为交叉轴。

排列方向（flex direction）：弹性容器的主轴起点（main start）/ 主轴终点（main end）和侧轴起点（cross start）/ 侧轴终点（cross end）描述了弹性项目排布的起点和终点。

行（line）：根据flex-wrap属性，flex item可以排布在单个行或者多个行中。

尺寸（Dimension）：根据主轴和侧轴，flex item的宽和高中，对应主轴为主轴尺寸（main size），对应侧轴为侧轴尺寸（cross size）。

图例解释：

2 属性详解

以下属性按照功能分类来介绍：

2.1 flex container属性

1、flex-flow：flex-direction和flex-wrap的简写。默认值row nowrap。

2、flex-direction：定义主轴，交叉轴垂直于主轴。主要是改变主轴的方向和主轴的起点和终点。

• row【从左到右排列一行】，默认值
• row-reverse【从右到左排列一行】
• column【从上到下排列成一列】
• column-reverse【从下到上排列成一列】

注：flex-direction并不是把flex item从主轴移到交叉轴上对齐，而是让主轴自身从水平->垂直或者从垂直->水平。

3、flex-wrap：默认情况下，flex item都排列在一条轴线上，而flex-wrap定义如果一条轴线上排列不下时如何换行。

• nowrap【不换行】，默认值
• wrap【换行，第一行在上方】
• wrap-reverse【换行，第一行在下方】

4、justify-content：定义flex item在主轴上的对齐方式。

• flex-start【主轴起点对齐】，默认值
• flex-end【主轴终点对齐】
• center【主轴中点居中】
• space-between【主轴两端对齐，flex item之间的间隔都相等】
• space-around【flex item两侧的间隔相等，flex item之间的间隔比项目两边的间隔大一倍】

注：flex item不可伸缩或者可伸缩已经达到最大尺寸的时候，可以分配主轴线上的剩余空间时才可以。

5、align-items：定义flex item在交叉轴上的对齐方式。

• flex-start【当前交叉轴起点对齐】
• flex-end【当前交叉轴终点对齐】
• center【当前交叉轴中点对齐】
• baseline【flex item第一行文字的基线对齐】
• stretch【如果flex item未设置cross size或者设置为auto，将铺满交叉轴方向的size】，默认值

注：当flex-wrap：wrap / wrap-reverse时，对应多条主轴线，按照主轴线可以将flex container分为多个块，每个块内对应交叉轴和交叉轴的起始点，而上面的对齐是根据这里每个块的起始点；如果flex-wrap：nowrap时，为特殊情形。

6、align-content：定义多根轴线的对齐方式，如果只有一条轴线，则该属性不起作用。

• flex-start【交叉轴起点对齐】
• flex-end【主轴终点对齐】
• center【主轴中点居中】
• space-between【交叉轴两端对齐，flex item之间的间隔都相等】
• space-around【每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍】
• stretch【轴线占满整个交叉轴】，默认值

注：此时对应整个flex container容器的cross axis，注意这时只有一个cross start和一个cross end。

2.2 flex item属性

1、flex：flex-grow、flex-shrink和flex-basic的简写。默认值0 1 auto。

注：

1. 该属性对应两个快捷值：auto【1 1 auto】和none【0 0 auto】；
2. 优先使用该属性，不建议单独分开写三个属性，因为浏览器会推算相关值。

2、flex-grow：定义flex item的拉伸比例。

• <number>【正整数，负数无效】，默认值为0

注：按照比例分割剩余的空间。例如：如果所有flex item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个flex item的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink：定义flex item的收缩比例，即如果空间不足，该flex item将缩小。

• <number>【从左到右排列一行】，默认值为1

注：如果所有flex item的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个flex item的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4、flex-basic：定义flex item占据的主轴空间（main size），根据此属性计算主轴是否有多余的空间。

• auto【flex item本来的大小】，默认值
• <number>【可固定，如：350px；也可以设置百分比，如：25%】

注：如果flex-basic:auto;，则auto会解析为其内容的大小，设置宽度时有min-content和max-content两个值，此时flexbox 会将flex子元素的 max-content 大小作为 flex-basis的值；

5、align-self：定义单个flex item与其他flex item不一样的对齐方式。

• auto【表示继承父元素的align-items属性，如果没有父元素，则等同于stretch】，默认值
• flex-start【当前交叉轴起点对齐】
• flex-end【当前交叉轴终点对齐】
• center【当前交叉轴中点对齐】
• baseline【flex item第一行文字的基线对齐】
• stretch【如果flex item未设置cross size或者设置为auto，将铺满交叉轴方向的size】

注：

1. align-self：auto; 时，其值被计算为父级元素的align-items属性的值，或者如果元素没有父元素，那么其值为stretch；
2. 除了auto，其他都与align-items属性完全一致。

6、order：定义flex item排列顺序。数值越小，排列越靠前。

• <integer>【顺序值】，默认值为0

注：flex item可以使用这个简单的属性重新排序，而不需要重新修改HTML代码。

7、min-width / min-height：定义flex item的main size的最小值。

8、max-width / max-height：定义flex item的main size的最大值。

3 浏览器兼容性

浏览器兼容性查看：https://caniuse.com/#feat=flexbox

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax