一、Flex 布局是(shì)什麽？

Flex 是(shì) Flexible Box 的(de)縮寫，意爲(wéi / wèi)"彈性布局"，用來(lái)爲(wéi / wèi)盒狀模型提供最大(dà)的(de)靈活性。
任何一個(gè)容器都可以(yǐ)指定爲(wéi / wèi) Flex 布局。

.box{
  display: flex;
}

行内元素也(yě)可以(yǐ)使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的(de)浏覽器，必須加上(shàng)-webkit前綴。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設爲(wéi / wèi) Flex 布局以(yǐ)後，子(zǐ)元素的(de)float、clear和(hé / huò)vertical-align屬性将失效。

二、基本概念

采用 Flex 布局的(de)元素，稱爲(wéi / wèi) Flex 容器（flex container），簡稱"容器"。它的(de)所有子(zǐ)元素自動成爲(wéi / wèi)容器成員，稱爲(wéi / wèi) Flex 項目（flex item），簡稱"項目"。

容器默認存在(zài)兩根軸：水平的(de)主軸（main axis）和(hé / huò)垂直的(de)交叉軸（cross axis）。主軸的(de)開始位置（與邊框的(de)交叉點）叫做main start，結束位置叫做 main end；交叉軸的(de)開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個(gè)項目占據的(de)主軸空間叫做main size，占據的(de)交叉軸空間叫做cross size。

三、容器的(de)屬性

以(yǐ)下6個(gè)屬性設置在(zài)容器上(shàng)。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction屬性

flex-direction屬性決定主軸的(de)方向（即項目的(de)排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4個(gè)值。

row（默認值）：主軸爲(wéi / wèi)水平方向，起點在(zài)左端。
row-reverse：主軸爲(wéi / wèi)水平方向，起點在(zài)右端。
column：主軸爲(wéi / wèi)垂直方向，起點在(zài)上(shàng)沿。
column-reverse：主軸爲(wéi / wèi)垂直方向，起點在(zài)下沿。

3.2 flex-wrap屬性
默認情況下，項目都排在(zài)一條線（又稱"軸線"）上(shàng)。flex-wrap屬性定義，如果一條軸線排不(bù)下，如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三個(gè)值。
（1）nowrap（默認）：不(bù)換行。
（2）wrap：換行，第一行在(zài)上(shàng)方。
（3）wrap-reverse：換行，第一行在(zài)下方。

3.3 flex-flow
flex-flow屬性是(shì)flex-direction屬性和(hé / huò)flex-wrap屬性的(de)簡寫形式，默認值爲(wéi / wèi)row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content屬性
justify-content屬性定義了(le／liǎo)項目在(zài)主軸上(shàng)的(de)對齊方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5個(gè)值，具體對齊方式與軸的(de)方向有關。下面假設主軸爲(wéi / wèi)從左到(dào)右。

flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之(zhī)間的(de)間隔都相等。
space-around：每個(gè)項目兩側的(de)間隔相等。所以(yǐ)，項目之(zhī)間的(de)間隔比項目與邊框的(de)間隔大(dà)一倍。

3.5 align-items屬性
align-items屬性定義項目在(zài)交叉軸上(shàng)如何對齊。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5個(gè)值。具體的(de)對齊方式與交叉軸的(de)方向有關，下面假設交叉軸從上(shàng)到(dào)下。

flex-start：交叉軸的(de)起點對齊。
flex-end：交叉軸的(de)終點對齊。
center：交叉軸的(de)中點對齊。
baseline: 項目的(de)第一行文字的(de)基線對齊。
stretch（默認值）：如果項目未設置高度或設爲(wéi / wèi)auto，将占滿整個(gè)容器的(de)高度。

3.6 align-content屬性
align-content屬性定義了(le／liǎo)多根軸線的(de)對齊方式。如果項目隻有一根軸線，該屬性不(bù)起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

該屬性可能取6個(gè)值。

flex-start：與交叉軸的(de)起點對齊。
flex-end：與交叉軸的(de)終點對齊。
center：與交叉軸的(de)中點對齊。
space-between：與交叉軸兩端對齊，軸線之(zhī)間的(de)間隔平均分布。
space-around：每根軸線兩側的(de)間隔都相等。所以(yǐ)，軸線之(zhī)間的(de)間隔比軸線與邊框的(de)間隔大(dà)一倍。
stretch（默認值）：軸線占滿整個(gè)交叉軸。

四、項目的(de)屬性

以(yǐ)下6個(gè)屬性設置在(zài)項目上(shàng)。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order屬性
order屬性定義項目的(de)排列順序。數值越小，排列越靠前，默認爲(wéi / wèi)0。

.item {
  order: <integer>;
}

4.2 flex-grow屬性
flex-grow屬性定義項目的(de)放大(dà)比例，默認爲(wéi / wèi)0，即如果存在(zài)剩餘空間，也(yě)不(bù)放大(dà)。

.item {
  flex-grow: <number>; /* default 0 */
}

如果所有項目的(de)flex-grow屬性都爲(wéi / wèi)1，則它們将等分剩餘空間（如果有的(de)話）。如果一個(gè)項目的(de)flex-grow屬性爲(wéi / wèi)2，其他(tā)項目都爲(wéi / wèi)1，則前者占據的(de) 剩餘空間将比其他(tā)項多一倍。

4.3 flex-shrink屬性
flex-shrink屬性定義了(le／liǎo)項目的(de)縮小比例，默認爲(wéi / wèi)1，即如果空間不(bù)足，該項目将縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有項目的(de)flex-shrink屬性都爲(wéi / wèi)1，當空間不(bù)足時(shí)，都将等比例縮小。如果一個(gè)項目的(de)flex-shrink屬性爲(wéi / wèi)0，其他(tā)項目都爲(wéi / wèi)1，則空間不(bù)足時(shí)，前者不(bù)縮小。負值對該屬性無效。
4.4 flex-basis屬性
flex-basis屬性定義了(le／liǎo)在(zài)分配多餘空間之(zhī)前，項目占據的(de)主軸空間（main size）。浏覽器根據這(zhè)個(gè)屬性，計算主軸是(shì)否有多餘空間。它的(de)默認值爲(wéi / wèi)auto，即項目的(de)本來(lái)大(dà)小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以(yǐ)設爲(wéi / wèi)跟width或height屬性一樣的(de)值（比如350px），則項目将占據固定空間。
4.5 flex屬性
flex屬性是(shì)flex-grow, flex-shrink 和(hé / huò) flex-basis的(de)簡寫，默認值爲(wéi / wèi)0 1 auto。後兩個(gè)屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個(gè)快捷值：auto (1 1 auto) 和(hé / huò) none (0 0 auto)。
建議優先使用這(zhè)個(gè)屬性，而(ér)不(bù)是(shì)單獨寫三個(gè)分離的(de)屬性，因爲(wéi / wèi)浏覽器會推算相關值。
4.6 align-self屬性
align-self屬性允許單個(gè)項目有與其他(tā)項目不(bù)一樣的(de)對齊方式，可覆蓋align-items屬性。默認值爲(wéi / wèi)auto，表示繼承父元素的(de)align-items屬性，如果沒有父元素，則等同于(yú)stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

該屬性可能取6個(gè)值，除了(le／liǎo)auto，其他(tā)都與align-items屬性完全一緻。

原文出(chū)自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html