【前端工程师手册】关于flexbox的why、what和how

摘要：如何使用首先梳理一下，将属性分为两类作用在容器元素上的有个，其实容器元素上还有一个设置的属性作用在子元素上的有个当时设置布局之后，子元素的的属性将会失效。

长久以来，网页布局是一个比较难搞的地方，各种前端前辈呕心沥血总结了各种奇淫巧技，比如利用float和position来实现居中、两栏、三栏等等布局。然而css并不存在一个官方的布局方案，终于一种新的布局方案就出现了。

flex即是弹性盒子布局，既然有弹性那么就说明它是可以达到自适应的目的的。
根据我的理解，flex布局主要有两部分需要注意，采用flex布局的元素叫做flex容器元素，flex容器元素内部的元素叫做子元素。flex布局的所有属性也可以分为两类，一部分是作用在容器元素，一部分作用在子元素。

借用一张MDN的图，首先flex布局是二维的，就像平面直角坐标系一样会有X轴和Y轴，所以如图设置了display:flex的容器元素默认有横向的主轴（main axis）和纵向的交叉轴（cross axis），当然了也可以设置为主轴为纵向交叉轴为横向。
和主轴和交叉轴相关的还有main size和cross size，main size即是单个子元素占主轴的空间，cross size即是单个子元素占交叉轴的空间。

首先梳理一下，将属性分为两类：
作用在容器元素上的有7个：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、place-content，其实容器元素上还有一个设置display:flex/inline-flex的属性
作用在子元素上的有6个：align-self、order、flex-grow、flex-shrink、flex-basis、flex
ps：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

display: flex | inline-flex
设置flex生成一个块级的容器元素；inline-flex生成一个行级的容器元素

flex-direction: row | row-reverse | column | column-reverse
设置主轴的方向，会影响子元素在主轴的排列方向，默认是row

flex-wrap: nowrap | wrap | wrap-reverse
主轴尺寸固定时，子元素排列不下时，是否要换行

flex-flow: flex-direction 和 flex-wrap 的简写形式（没什么好说的

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
决定了子元素在主轴上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch
决定了子元素在交叉轴上如何对齐

align-content：flex-start | flex-end | center | space-between | space-around | stretch
定义的是多艮轴线的对其方式，当子元素只有一根轴线时，这个属性不起作用
以默认主轴为例，如果子元素太多产生换行，此时子元素就有多个轴线，align-items设置的就是这多根轴线的对其方式，具体表现和justify-content、align-items一样

place-content：是align-content和justify-content的缩写

order：子元素在容器元素中排列的顺序，数值越小排列越靠前，默认为0，可以取负值

align-self：auto | flex-start | flex-end | center | baseline | stretch
单个子元素在交叉轴上的对其方式，取值和表现方式与align-items一样，但是只作用于单个子元素

flex-basis：auto |
flex-shrink：
flex-grow：
这三个属性放在一起说，
flex-grow定义了容器元素有剩余空间时，子元素是否会放大以及如何放大，默认为0即不放大；如果所有子元素的flex-grow都是1，则在剩余空间中，所有子元素都取一份来放大；如果某子元素的flex-grow是2，则此子元素在剩余框架中取2份来放大。
flex-shrink定义了容器元素空间不足时，子元素是否会缩小以及如何缩小，默认为1即会缩小；如果所有子元素的flex-shrink都是0，则空间不够时不缩小；如果所有子元素的flex-shrink都是1，则空间不足时，所有子元素缩小相同的比例；如果某子元素的flex-shrink是2，则该子元素缩小的比例是其他子元素的2倍。
flex-basis定义了在分配多余空间之前，子元素占据的主轴空间，浏览器会根据这个来计算剩余空间，也就是说设置了flex-basis的子元素会覆盖掉原来设置的尺寸大小；默认值为auto，即子元素原本的大小。

flex：flex-grow, flex-shrink 和 flex-basis的简写

参考资料：
MDN
知乎专栏-30分钟学会flex