Flex布局是什么？
W3C針對布局設(shè)計的新標準膀估，相對float和position會更加靈活處理父元素和子元素之間布局關(guān)系幔亥，讓布局更加直觀和靈活簡單。有效的針對不同屏幕寬度大小的情況下察纯，讓元素自動有效合理處理布局結(jié)構(gòu)帕棉。
適用范圍
彈性盒子布局主要適用于應(yīng)用程序的組件及小規(guī)模的布局针肥，而（新興的）柵格布局則針對大規(guī)模的布局。
Flex布局基本概念
彈性容器(Flex container)
通過設(shè)置 display 屬性的值為 flex 或 inline-flex
來定義彈性容器香伴。
彈性項目(Flex item)
彈性容器里子元素自動成為彈性項目慰枕，并且彈性項目的float、clear和vertical-align屬性將失效即纲。
軸(Axis)
- 主軸（main axis）
- 交叉軸（cross axis）
這個2個軸決定了容器里的項目整體布局效果具帮。
Flex容器屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction決定主軸方向，默認情況下低斋，元素都是從左到右地分布在主軸上
4個取值：
flex-direction: row | row-reverse | column column-reverse;
row（默認值）：主軸為水平方向蜂厅，起點在左端。
row-reverse：主軸為水平方向膊畴，起點在右端掘猿。
column：主軸為垂直方向，起點在上沿唇跨。
column-reverse：主軸為垂直方向稠通，起點在下沿。
flex-wrap
是否可以換行（默認不換行）买猖，以及如果可以換行改橘，如何排列
3個取值
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap: 默認不換行
wrap: 可以多行，第一行在上方
wrap-reverse: 可以多行玉控，第一行在下方
flex-flow
flex-direction 和 flex-wrap 的簡寫,默認
row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
justify-content
決定項目在主軸上的對齊方式
5種取值：
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start: 左對齊（默認）
flex-end: 右對齊
center: 居中對齊
space-between: 兩端對齊飞主，項目之間的間距相等
space-around: 均勻?qū)R，每個項目兩端的間距相等
align-items
決定交叉軸的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start: 交叉軸起點對齊
flex-end: 交叉軸終點對齊
center: 交叉軸居中對齊
baseline: 第一行文字的底部對齊
stretch: （默認）如果項目木有設(shè)置高度或者高度為auto,那么項目拉伸充滿整個交叉軸空間
注意：記住
justify-content是沿著主軸的奸远，align-items是沿著交叉軸的既棺，而flex-direction是轉(zhuǎn)換主軸的。這對整體移動元素很關(guān)鍵懒叛。
align-content
定義多行軸線的對齊方式（如果只有一行丸冕，該屬性不起作用）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start: 交叉軸起點對齊
flex-end: 交叉軸終點對齊
space-between: 交叉軸兩端對齊，行之間間距相等
space-around: 交叉軸均勻?qū)R薛窥，行兩端間距相等
stretch: 平均分配交叉軸空間胖烛，相鄰行間距相等（默認，前提如果項目木有設(shè)置高度或者高度為auto）
注意：當(dāng)項目的高度之和小于容器的高度并且項目高度固定時诅迷，會以交叉軸起點對齊并且項目之間間距相等佩番，但不是flex-start對齊方式，如果此時設(shè)置flex-start是沒有間距的罢杉。
這里項目設(shè)置了固定高度趟畏，所以stretch無效
Flex項目屬性
- order
- align-self
- flex-grow
- flex-shrink
- flex-basis
order
根據(jù)order的值定義項目排列順序。數(shù)值越小滩租，排列越靠前赋秀，默認為0
align-self
定義單個項目在交叉軸的對齊方式利朵，可覆蓋
align-items屬性
取值和align-items一樣：
flex-grow
定義項目放大比例，默認為0猎莲，當(dāng)容器有剩余空間時不放大.
重點在于绍弟，每個方塊的flex-grow和其他方塊的是成比例的。
flex-grow: <number>; /* default 0 */
第3個項目flex-grow 為3,其他5個項目為1著洼，共 5+3 = 8,第3個占比為3/8,其他為1/8.
flex-shrink
定義項目縮小比例樟遣。默認為1，隨著容器縮小而等比例縮小身笤。
如果設(shè)置為0豹悬，項目將不縮小。
基本和flex-grow類似展鸡，不過一個是縮小屿衅，一個是放大埃难。
flex-shrink: <number>; /* default 1 */
flex-basis
定義項目占據(jù)的主軸空間（main size）,默認是auto.
還有就是它可能被其他flex屬性所影響莹弊。
flex-basis: <length> | auto; /* default auto */
下面這個 GIF 表示的是它和 width 屬性是可以互換的。（但是不完全是這樣）
注意：flex-basis 和 width 不同的地方是涡尘，它是和 flex 坐標軸保持一致的忍弛，flex-basis是影響主軸上大小。
下面保持flex-basis不變考抄，改變主軸方向
這個時候改變height细疚，而不是width，flex-basis 根據(jù) flex-direction 的不同會影響到 width 或者 height川梅。
flex
flex-grow, flex-shrink 和 flex-basis的簡寫疯兼，默認值為0 1 auto。后兩個屬性可選贫途。
/*簡寫
auto (1 1 auto)
none (0 0 auto)
*/
.square#one {
flex: 2 1 300px;
}
.square#two {
flex: 1 2 300px;
}
最后注意：主軸和交叉軸需要特別注意方向吧彪，因為flex屬性大部分是作用與軸上的,而方向不同就會導(dǎo)致不同布局效果。
參考鏈接
通過動圖形象地為你介紹 flexbox 是如何工作的（一）
通過動圖形象地為你介紹 Flexbox 是如何工作的（二）
Flex 布局教程：語法篇
flex基礎(chǔ)布局詳解
使用 CSS 彈性盒子
