* 彈性布局 *
- 創建彈性布局容器: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
三行兩列自適應布局
