CSS传统的定式布局，是一种流式布局，目的是为了把一整颗不管多大的DOM树塞进浏览器的视界。另外，定式布局还跟语言的阅读和书写习惯相关联，一般是从左往右从上往下。

定式布局由于其通用性，可以供布局使用的选项比较少。为了实现更精确地布局，CSS提供了其他布局方式，比如Flexblox和Grid。本篇讨论的就是Flexbox（Flexible box），或者直接叫Flex。

把一个元素的display属性设为flex，那么这个元素的子项就可以按照flex的方式来排布。

flex一般应用在元素的内部，而不是像基于inline和block的定式布局那样作用在全局。Flex也是一种单维度的流式布局，不过提供更多控制选项。Grid是双维度的布局。

Flex可以看成是箱体模型的扩展。一个元素具有的内容区域是一个方格，如果看成是一个二维空间，那么排布过程可以从主线轴（main axis）和垂线轴（cross axis）两个方向进行控制。如果主线轴是横向的，那么垂线轴就是竖向的；如果主线轴是竖向的，那么垂线轴就是横向的。不管是横向还是竖向轴，都可以控制其起始点。所以flex的流既可以从左到右，也可以从右到左；更可以从上到下，或者从下往上。

Flex是流式的，通常只沿主线轴列队排布元素，并不折返。但是通过指定flex-wrap则可以在碰到边界的时候折返，重新沿着主线轴起点开始排布。折返的flex可以看作是一个新的flex线轴的开始。由于flex默认的流只有一线轴，那么flex会让这一线轴的元素在垂线轴上处于扩展（stretch）状态，占据所有空间。flex-wrap有多个选项，可以是wrap，也可以是wrap-reverse，这两个选项会影响flex流在垂线轴的排布。

flex-direction和flex-wrap这两个选项可以合并到flex-flow里面。

Display设为flex的元素变为一个flexbox，里面的子元素则变成flexitem。flexitem有自己的特殊属性可以设置，比如：

  • flex-basis：默认为auto，用来设置flexitem的大小，默认为auto，可以设置为一个数值，用来表示目标大小。会覆盖元素的width/height等属性。
  • flex-grow：默认为0，设置放大比例系数。当主线上有多余的空间，设置有flex-grow属性的flexitem可以按比例放大以占用剩余空间。
  • flex-shrink：默认为1，设置缩小比例系数。当flexitem有多余的空间可以被挤压出来时，这个系数决定从flexitem，挤出多少空间。但是如果flexitem没有空间可以挤，那么这个参数无效。

flex-grow, flex-shrink和flex-basis可以合并到flex选项里面去。flex可以设置为initial （0，0，auto），auto（1，1，auto），none（0，0，auto），

order属性可以帮忙改变flexitem的次序

关于对齐方面，justify-content可以用来控制主线轴上flexitem的分布；align-content可以用来控制垂线轴上元素的分布；align-items可以用来控制主线轴上的元素在垂线轴上的对齐。

inline-flex

What’s the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.

How to force child div to be 100% of parent div’s height without specifying parent’s height?

其他参考

（完）