flexBox

flexible box
移动端标签

父块定义 display:flex;
则子块为弹性
项目排列方式
flex-direction:row|row-reverse|column|column-reverse
定义主轴 行 反行 列 反列
左->右 左<-右 顶 下
^ ^
| |
下 顶
justify-content:space-between |space-around | flex-end/flex-start
两边顶边，中间块等间距 两边1/2正常间距，中间块等间距 从父块开始/结尾开始排列
align-items
flex-start|flex-end|baseline|center|stretch
align-content 定义多根轴线对齐方式，只有一根轴线不起作用
flex-start|flex-end|center|space-between|space-around
flex-wrap
wrap|nowrap|wrap-reverse
(默认)
Item
order:inherit (integer)
flex-grow 子块占父块比例(扩大)
0|1|2
flex-shrink 子块占父块比例(收缩)
0|1|2

From WizNote