弹性盒模型-flex布局总结

弹性盒模型（Flexbox）是本人在开发过程经常使用到的布局方式，虽然经常使用，但也仅仅只对其中经常用到一些属性比较了解，还有一些不常用的属性（order.align-self等）掌握的不太深，希望写完本文之后能够加深自己对于弹性盒模型的一些理解，也希望能够帮助更多的朋友们更好的理解并掌握弹性盒模型，不再是每次一遇到问题就百度（CV工程师）。

什么是弹性盒模型？

弹性盒模型（Flexible Box）又称为flexbox，这是一种布局模型，我个人的理解是处理子元素的空间分布和对齐。例如：

同一行内的元素均匀分布
同一行内的元素分布于左右两侧
同一行内的元素垂直居中对齐

我本人在开发当中经常使用这个模型来进行居中处理以及元素的自适应，比如图片加文字需要位于块的中间并且图片和文字需要垂直居中，这个时候应用弹性盒模型就可以轻松搞定了，再者就是元素的自适应，比如左侧是菜单栏，宽度固定，右侧显示主内容，占据屏幕剩余宽度的时候，相比使用css的calc来进行计算，我个人更倾向于弹性盒模型来进行自适应。话不多说，直接进入正题。

flex-direction 主轴分布

既然是处理子元素的对齐，那总得有个对齐的标准吧，实际上弹性盒模型对齐的标准就是两根轴，主轴和交叉轴，需要注意的的是轴是有方向的，且交叉轴始终是与主轴保持垂直。

主轴是由flex-direction属性进行定义,指定了弹性子元素在父容器中的位置，有四个可选属性值，取值及对应值的含义如下所示：

row 主轴是行方向，从父容器左侧指向右侧，默认值
row-reverse 主轴是反转的行方向，从父容器右侧指向左侧，
column 主轴是列方向，从父容器顶部指向底部
column-reverse 主轴是倒转的列方向，从父容器的底部指向顶部

往父容器里面添加元素时，将按照主轴的方向依次摆放子元素，下面将用绘图形式分别说明四个取值的表现。

当flex-direction的取值是row时，子元素的摆放方式是从左到右依次摆放的，图中红色的方框表示弹性盒元素，主轴的方向是从父容器左侧指向容器右侧，所以当继续往容器里面添加一个元素C时将放置于B元素的右侧，实际上默认情况下元素之间是没有间距紧邻着的，这里是为了示意所以元素A和B之间有一个间距。

当flex-direction的取值是column时，子元素的摆放方式是从父容器的顶部依次向父容器底部摆放，当继续往容器中添加一个C元素时，元素C的填充位置为沿着主轴方向继续摆放在B元素的下方。

flex-direction的取值为row-reverse的时候，对比row与row-reverse,只是多了一个reverse的后缀，reverse有反转的含义，所以row-reverse的含义就是将flex-direction的取值为row时的主轴反转，注意，仅仅是反转主轴，交叉轴的方向并没有发生改变，继续添加一个元素C时，元素C将出现在元素B的左侧。

同理，column-reverse就是倒置column的主轴，继续添加一个元素C时，元素C将出现在元素B的上面。

总的来说主轴可能有四个不同的方向，但是交叉轴只会有两种方向。

justify-content 主轴对齐

justify-content定义了子元素在主轴上的分布模式

flex-start 默认值,子元素从主轴的起始位置向主轴的终点方向依次平齐摆放
flex-end 元素从主轴的终点位置向主轴的起点方向依次平齐摆放
center 元素集中分布到主轴的中间位置紧挨着填充
space-between 元素平均分布，元素之间的间隔相等,位于两端的子元素与父容器之间没有间隔，可以理解成两个子元素分别占据两端之后剩余的子元素在中间均匀分布
space-around 将可用空间均分到元素两侧且每一个子元素两侧均有间隔

传送门：菜鸟教程对于justify-content各属性的说明示意图如下所示

这里比较难理解的是space-between和space-around，假定父容器宽度为200px，有三个子元素，A、C宽度均为40px，B的宽度为60PX，那么当取值是space-between时元素B和元素A、C之间的间距为 <math xmlns="http://www.w3.org/1998/Math/MathML"> （ 200 − 40 − 40 − 60 ） / 2 = 30 p x （200-40-40-60）/2=30px </math>（200−40−40−60）/2=30px，取值是space-arround时元素B和元素A、C间的间距就是 <math xmlns="http://www.w3.org/1998/Math/MathML"> ( 200 − 40 − 40 − 60 ) / 6 × 2 = 20 p x (200-40-40-60)/6×2=20px </math>(200−40−40−60)/6×2=20px，可以参考下面这张图。

space-between是将多出来的宽度均匀分布到子元素之间，space-around则是将多出来的宽度平均分布到子元素的两侧。

align-items 交叉轴对齐

align-item定义了容器内的元素在交叉轴方向如何对齐，有四个可选值

flex-start 全部对齐到交叉轴的起点，默认值
flex-end 对齐到交叉轴的终点
center 对齐到交叉轴的中间
baseline 基线对齐
stretch 伸展对齐

先来直接上图看一下前三个取值对应的效果，图中父容器的justify-content的取值是默认值row，此时的交叉轴方向是从父容器顶部指向父容器的底部。

flex-start、flex-end、center的表现同justify-content取这三个值时候的表现是一样的，直接看效果就能明白，不做过多解析。 baseline和stretch两个值有点特殊，baseline指的是子元素的基线对齐，单独拎出来讲一下。首先具体看基线对齐的效果

图中的紫色辅助线就是"基线"，基线对齐的情况也比较少见，有兴趣的朋友可以自行去了解更多有关"基线"的资料。

当取值是stretch时，如果子元素的高度是"auto"，那么子元素的将会在交叉轴方向上被拉伸至填满父元素，具体效果如下图所示，元素B给定了高度，不受父元素影响，元素A、C没有给定高度，靠内容撑开，受到父元素的影响，高度伸展至于父元素等高。

flex-wrap换行

默认情况下弹性盒元素只有一行，就是说无论有多少个子元素都将会放在一行上，flex-direction取值是row时如果子元素的宽度超出父元素的宽度，那么子元素的宽度将被压缩，flex-wrap属性就是定义弹性盒子的子元素换行方式。

wrap 弹性容器是多行的，子元素溢出时将到放到新的一行；
nowrap 弹性容器只有一行，元素将会被压缩以强行在一行内放置所有元素，默认值；
wrap-reverse 按照反转交叉轴方向换行

取值是nowrap时效果如下所示，元素A、B、C均指定了宽度为100px，受到父元素的影响，子元素均被压缩到一行摆放。

取值是wrap时效果如下所示，元素超出溢出时被摆放到新的一行。

取值是wrap-reverse时效果如下所示，元素超出溢出时被摆放到新的一行，与wrap的差别在于换行的方向发生了变化，是按照反转的交叉轴方向进行换行。

flex-flow 简写

flex-flow是flex-direction和flex-wrap的简写形式，必须先是flex-direction的取值，然后是flex-wrap的取值

css 复制代码

flex-flow：column wrap；// 主轴为column，元素溢出时换行

flex-flow：row-reverse nowrap；//主轴方向为row0-reverse，元素溢出时不换行

align-content 行对齐

align-content定义了行的对齐方式，取值如下

stretch - 默认。伸展各行以占用剩余的空间
flex-start - 各行向弹性盒容器的起始位置堆叠
flex-end - 各行向弹性盒容器的结束位置堆叠
center -各行向弹性盒容器的中间位置堆叠
space-between -各行在弹性盒容器中平均分布
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

具体的取值效果如下所示

结尾

还有几个关于弹性子元素的属性没有讲，准备另外写一篇文章来进行总结。

这是本人第一次写关于技术性质的总结文章，期间翻阅了不少资料，加深了对于这些属性的深入理解，如果有错误或者表述不对的地方，欢迎朋友们留言进行讨论，共同提升。