Flex弹性盒模型打破传统css布局方式——轴篇

Flex的核心是容器和轴，容器指父级容器和子容器，轴指主轴和交轴。

轴：

主轴：justify-content；flex-direction 决定主轴的方向

flex-direction: row 向右

flex-direction: column 向下

flex-direction: row-reverse 向左

flex-direction: column-reverse 向上

交叉轴：align-items；

 

Flex进阶概念

父容器：

flex-wrap 设置换行方式

nowrap：不换行

wrap：换行

wrap-reverse：逆序换行

flex-flow 轴向与换行组合设置

flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 flex-flow: row wrap

align-content 多行沿交叉轴对齐

当子容器多行排列时，设置行与行之间的对齐方式。

位置排列：

flex-start 起始端对齐

flex-end 末端对齐

center 居中对齐

分布排列：

space-between 首尾端到父级容边距是子容器之间边距的一半

space-around 首尾端均匀对齐分步

拉伸排列：

stretch 子容器沿交叉轴方向的尺寸拉伸至与父容器一致

子容器：
flex-basis 设置基准大小

flex-grow 设置扩展比例

flex-shrink 设置收缩比例

order 设置排列顺序