1. Flex布局簡介

Flex布局又叫彈性布局，設計思想是應用于響應式布局開發(fā)焙矛。
兼容性為IE9以上田盈。

2. Flex布局

2.1. 應用于元素

display: flex 應用于元素
display: inline-flex 應用于行內元素
display: -webkit-flex 兼容safari
被應用flex的元素叫做container（容器）
flex container的子元素叫做item（項目）

2.2. Flex布局概念

被應用Flex的container肄满，其items會自動布局。布局方式參照container的flex屬性撞羽。

2.3. flex-direction

axis是flex container的x軸和y軸
horizon axis 水平軸
vertical axis 垂直軸
container有main axis（主軸）的概念，我們可以在
x+ x- y+ y- 兩條軸4個方向上選出任意一條當做main axis衫冻。
container的items會自動沿著main axis進行排布诀紊。
默認的main axis是x+軸，即從左到右的水平軸隅俘。
和main axis垂直的叫做cross axis邻奠，(垂直軸)

flex-direction
選擇哪一根是main axis
flex-direction:row x+
flex-direction:row-reverse x-
flex-direction:column y-
flex-direction:column-reverse y+

2.3. flex-wrap

flex-direction控制了flex container的items是延那個axis排列，但是沒有控制起始行为居。
flex-wrap就是控制了items的排列起始行惕澎。
比如8*8的container，里面放幾個items颜骤。main axis選擇x+唧喉。我們知道了items從左到右排列。
同時也必須知道這些items是在 (1,1) (2,1) (3,1) ……這樣排列還是（1,-8）（2忍抽，-8）（3八孝，-8）這樣排列。

flex-wrap
flex-wrap: wrap
flex-wrap: nowrap 不換行 （默認）
flex-wrap: wrap-reverse

如果main axis是x+ 或者x- 那么flex:wrap默認就是y-鸠项，即從上到下干跛。同時flex:wrap-reverse就是從下到上
如果main axis是y+ 或者y- 那么flex:wrap默認就是x+，即從左到右祟绊。同時flex:wrap-reverse就是從右到左

2.4. flex-flow

flex-flow是flex-direction和flex-wrap的簡寫形式
flex-flow: <flex-direction> || <flex-wrap>

小結一下

到現(xiàn)在我們知道了什么毁渗？

如果有一個4*4彈性的盒子，我們慢慢往盒子里加小盒子窜觉，大盒子會控制小盒子的增加位置夏块。
比如從左到右一個個加，如果換行了是新行在下方還是上方等等扬舒。

我們繼續(xù)思考這些問題

默認情況下阐肤，當我們加到2個盒子的時候，小盒子的擺放位置應該是這樣的
□ □ × ×
× × × ×
× × × ×
在不改變小盒子順序的情況下，如何改成這樣孕惜？
× × □ □
× × × ×
× × × ×
默認情況下愧薛，當我們加到6個盒子的時候，小盒子的擺放位置應該是這樣的
□ □ □ □
□ □ × ×
× × × ×
在不改變這6個小盒子樣式的情況下衫画，怎么讓這6個小盒子全部下移一行毫炉？（對齊到底邊）
× × × ×
□ □ □ □
□ □ × ×
這就要引入對齊方式了。

2.5. justify-content

知道了items從哪一行開始削罩，就想excel一樣碘箍，每一個單元格，我們還可以控制里面文字的對齊方式鲸郊，比如貼在左邊或者居中丰榴。
justify-content
justify-content:flex-start 對齊于這一行的起始
justify-content:flex-end 對齊于這一行的結尾
justify-content:center 居中對齊
justify-content:space-between 行首行末貼緊container，其他items間隔相同
justify-content:space-around items間隔相同秆撮，行首行末和container的間隔等于items的間隔一半

2.6. align-items

align-items:flex-start 整體對齊于第一行
align-items:flex-end 整體對齊于最后一行
align-items:center 行間距相同四濒，第一行和container的間隔等于最后一行和container的間隔，也等于行間距的一半
align-items:stretch 如果items沒有設置寬高职辨，那么會被在行上被拉伸
align-items:base-line 整體對齊于每個items第一行文字

2.7. align-content

僅限于有多行的情況下生效盗蟆。
align-content:flex-start 行距為0后，整體對齊于第一行
align-content:flex-end 行距為0后舒裤，整體對齊于最后一行
align-content:center 行距為0后喳资，整體對齊于中間線
align-content:space-between 首行緊貼container，尾行緊貼container腾供，其他行間隔相同
align-content:space-around 行間隔相同仆邓，首行和末行和container的間隔等于行間隔的一半

2.8. flex

flex是items的屬性！０楸睢节值！
這是一個合并屬性原始屬性是
flex-grow 0:空間足夠不會自動拉伸 1：空間足夠會自動拉伸
flex-shrink 0:空間不夠不會自動壓縮 1：空間不夠會自動壓縮
flex-basis auto：自動判斷main axis是否夠空間 其他值：根據(jù)這個值判斷main axis是否夠空間`