* 弹性布局 *
- 创建弹性布局容器:flex container
display:flex
1.弹性元素 flex item
- 弹性容器的在文档流中的直接子元素
（position:absolute等脱离文档流、 孙元素 都不是弹性元素）
1.排列方向
(1).flex-direction
flex-direction:row|row-reverse|column|column-reverse
row左到右（默认）
column上到下
reverse反向
eg.
(2).flex-wrap
flex-wrap:nowrap|wrap|wrap-reverse
nowrap（默认值）不换行
(3).flex-flow
flex-flow:<'flex-direction'>||<'flex-wrap'>
eg.
(4).order
order:<interger>
initial:0
order是一个相对的值
越大越靠后排
eg.
2.弹性
(1)flex-grow
flex-grow:<number>
initial:0
设置元素所能分配到剩余空间的比例
弹性布局元素宽度计算：flex-basis + flex-grow/sum(flow-grow)remain
(2)flex-shrink
flex-shrink:<number>
initial:1
弹性布局元素宽度计算：flex-basis + flex-shrink/sum(flow-shrink)remain
(3)flex-basis
flex-basis:main-size|<width>
设置flex item的初始宽/高
flex:<'flex-grow'>||<'flex-shrink'>
initial:0 1 main-size
3.对齐
(1)justify-content
justify-content:flex-start|flex-end|center|space-between|space-around
主轴设为纵向
(2)align-items 设置辅轴(cross-axis)方向的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch
(3)align-self 设置单个flex item 在cross-axis方向上对齐方式
align-self:auto|flex-start|flex-end|center|baseline|stretch
(4)align-content 设置cross-axis方向上行对齐方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch
三行两列自适应布局
