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

why——为什么使用flex

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

what——什么是flex

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

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

how——如何使用flex

首先梳理一下，将属性分为两类：
作用在容器元素上的有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 | <length>
flex-shrink：<number>
flex-grow：<number>
这三个属性放在一起说，
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