CSS3 - Flexible Box （Flex）
目錄
一、概念
Flex是Flexible Box（彈性盒子）的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。屬於CSS3的一種新佈局。當頁面需要適應不同的螢幕大小以及裝置型別時，確保元素擁有恰到的佈局方式。
Flex佈局中，子元素的float、clear和vertical-align屬性將失效。
採用Flex佈局的元素，稱為 彈性容器（flex container），簡稱”容器”。
容器的所有子元素自動成為容器成員，稱為 彈性專案（flex item），簡稱”專案”或“彈性子元素”。<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div>
水平為軸（main axis），主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end。
垂直為交叉軸（cross axis），交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
二、容器屬性
1、flex-direction 屬性
指定item在父容器中的位置，決定主軸的方向（即專案的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
-- row（預設值）：水平方向，從左到右排列（左對齊）。例：123
-- row-reverse：水平方向，與row相反，反轉橫行排列，（右對齊）從後往前排列，後項前置。例：321
-- column：垂直方向，從上往下排列。
-- column-reverse：垂直方向，與column相反，從上往下顯示，反轉縱向排序。後項前置。
<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div> <div class="flex-item">flex item 3</div> </div>
2、flex-wrap 屬性
定義，如果一條軸線排不下，如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
- nowrap - 預設， 彈性容器為單行，不換行。該情況下彈性子項可能會溢位容器。
- wrap - 彈性容器為多行，第一行位於上方。該情況下彈性子項溢位的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列，多行，第一行位於下方。
3、flex-flow 屬性
是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
4、justify-content （內容對齊）屬性
應用在彈性容器上，把彈性專案沿著主軸線（main axis）對齊。
justify-content: flex-start | flex-end | center | space-between | space-around;
- flex-start：
彈性專案向行頭緊挨著填充。這個是預設值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
- flex-end：
彈性專案向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
- center：
彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
- space-between：
彈性專案平均分佈在該行上。如果剩餘空間為負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰專案的間隔相等。
- space-around：
彈性專案平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有一個彈性項，則該值等同於center。否則，彈性專案沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
5、align-items 屬性
定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start
彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。- flex-end
彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。- center
彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。- baseline
如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。- stretch
如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
6、align-content 屬性
定義了多根軸線的對齊方式。
如果專案只有一根軸線，該屬性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;
stretch- 預設。各行將會伸展以佔用剩餘的空間。flex-start- 各行向彈性盒容器的起始位置堆疊。flex-end- 各行向彈性盒容器的結束位置堆疊。center-各行向彈性盒容器的中間位置堆疊。space-between-各行在彈性盒容器中平均分佈。space-around- 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
三、專案屬性
① order 屬性
定義專案的排列順序。數值越小，排列越靠前，預設為0。
order: <integer>;<integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } .first { order: -1; } </style> </head> <body> <div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item first">flex item 2</div> <div class="flex-item">flex item 3</div> </div> </body> </html>
② flex-grow 屬性
定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。flex-grow: <number>; /* default 0 */
③ flex-shrink 屬性
定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-shrink: <number>; /* default 1 */
④ flex-basis 屬性
定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。
flex-basis: <length> | auto; /* default auto */
⑤ flex 屬性
flex屬性用於指定彈性子元素如何分配空間。flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
- auto: 計算值為 1 1 auto
- initial: 計算值為 0 1 auto
- none：計算值為 0 0 auto
- inherit：從父元素繼承
- [ flex-grow ]：定義彈性盒子元素的擴充套件比率。
- [ flex-shrink ]：定義彈性盒子元素的收縮比率。
- [ flex-basis ]：定義彈性盒子元素的預設基準值。
⑥ align-self 屬性
align-self屬性用於設定彈性元素自身在側軸（縱軸）方向上的對齊方式。align-self: auto | flex-start | flex-end | center | baseline | stretch
- auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
- flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
- center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
