### 傳統布局:position + float + 正常流
### Flex布局:Flexible Box縮寫:彈性布局
1. 任何容器指定:display: flex
2. 行內容器指定:display: inline-flex;
3. 設定后,子元素的 float clear vertical-align 屬性將失效
### 容器內存在兩根軸:**主軸( main axis )與交叉軸( cross axis )**
1. 項目默認沿主軸排列
### 容器上可設置的六個屬性
1. flex-direction:屬性決定主軸的方向(即項目的排列方向)
flex-direction: row | row-reverse | column | column-reverse
2. flex-warp:如果一條軸線排不下,如何換行。
flex-wrap: nowrap | wrap | wrap-reverse
3. flex-flow
是flex-direction`屬性和`flex-wrap`屬性的簡寫形式,默認值為`row nowrap
4. justify-content:定義了項目( 元素item )在主軸上的對齊方式
justify-content:flex-start | flex-end | center | space-between | space-around
5. align-items:定義項目在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch
6. align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用
### 元素上可設置的六個屬性
1. order:屬性定義項目的排列順序。數值越小,排列越靠前,默認為0
order: 0
2. flex-grow:屬性定義項目的放大比例,默認為`0`,即如果存在剩余空間,也不放大
flex-grow: 1
3. flex-shrink:定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小
flex-shrink: 0
4. flex-basis:在分配多余空間之前,項目占據的主軸空間
5. flex:是`flex-grow`,`flex-shrink`和`flex-basis`的簡寫,默認值為`0 1 auto`
flex: 1
6. align-self:單個項目有與其他項目不一樣的對齊方式,可覆蓋`align-items`屬性
align-self: auto | flex-start | flex-end | center | baseline | stretch;