Flexbox 徹底指南

Flexbox 徹底指南

我不是這篇文章的原創做者，我只是好文章的搬運工。原文地址 A Complete Guide to Flexbox

應用於 flex container 的屬性

display
該屬性定義一個 flex container，根據不一樣取值定義爲 inline 或 block 的 flex container。應用了該屬性的元素爲它的全部子元素建立了一個 flex context。

.container {
  display: flex; /* or inline-flex */
}

注意，CSS3 的多列布局對 flex 容器沒有任何影響。

flex-direction

該屬性創建主軸，規定了 flex container 中的 flex item 的排布方向。Flexbox 是一種單向佈局概念，能夠認爲 flex item 都優先沿着水平行或豎直列布局。

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

• row （默認值）： 在 ltr 上下文中爲由左到右；在 rtl 上下文中爲由右到左。
• row-reverse ： 在 ltr 上下文中爲由右到左；在 rtl 上下文中爲由左到右。
• column ： 與 row 相似，只不過是由上到下。
  
• column-reverse ： 與 row-reverse 相似，只不過是由下到上。

flex-wrap

默認狀況下，全部的 flex item 都將盡可能保持在一個 line （行或者列，下同）以內。能夠經過這個屬性讓 flex item 在須要的狀況下換行或者換列。這裏，新行或新列從哪裏開始由 flex-direction 決定。

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

• nowrap （默認值）： 單 line。在 ltr 上下文中爲由左到右；在 rtl 上下文中爲由右到左。
  
• wrap ： 多 line。在 ltr 上下文中爲由左到右；在 rtl 上下文中爲由右到左。
  
• wrap-reverse ： 多 line。在 ltr 上下文中爲由右到左；在 rtl 上下文中爲由左到右。

flex-flow
該屬性爲 flex-direction 和 flex-wrap 的簡寫屬性，同時定義了 flex container 的主軸和交叉軸。默認值爲 row nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

該屬性定義了沿着主軸的對齊方式。它被用來處理當全部 flex item 都已經放置完畢後的剩餘空白空間。

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

• flex-start （默認值）： 全部的 flex item 都向 line 的開始位置對齊。
  
• flex-end ： 全部的 flex item 都向 line 結束位置對齊。
  
• center ： 全部的 flex item 都沿着 line 的中間位置對齊。
  
• space-between ： 全部的 flex item 都均勻的沿着 line 分佈，第一個 item 排在 line 的開始位置，最後一個 item 排在 line 的結束位置。
  
• space-around ： 全部的 flex item 都均勻的沿着 line 分佈，每一個 item 周圍的空白空間相等。注意，看上去每一個 item 周圍的空白空間不必定徹底相等，由於全部的 item 的兩邊都擁有大小徹底相同的空白空間。

align-items

該屬性定義了在當前 line 中 flex item 沿着交叉軸佈局的默認行爲。能夠認爲它是針對交叉軸的 justify-content。

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

• flex-start ： 沿着交叉軸方向的 margin 邊緣將會沿着交叉軸的開始位置對齊。
  
• flex-end ： 沿着交叉軸方向的 margin 邊緣將會沿着交叉軸的結束位置對齊。
  
• center ： 全部的 flex item 將沿着交叉軸的中央對齊。
  
• baseline ： 全部的 flex item 將會沿着他們的 baseline 對齊。
  
• stretch （默認值）： 拉伸以填滿容器（依然受 min-width/max-width 限制）。

align-content

該屬性用來在交叉軸還有空白空間的狀況下控制 flex container 內的全部 line 的對齊方式。與 justify-content 控制 flex item 如何沿着主軸方向對齊的方式相似。
注意： 單 line 狀況下，該屬性不生效。

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

• flex-start ： 全部的 line 都向 container 的開始位置對齊。
  
• flex-end ： 全部的 line 都向 container 的結束位置對齊。
  
• center ： 全部的 line 都沿着 container 的中央對齊。
  
• space-between ： 全部的 line 均勻分佈，第一個 line 在 container 的開始位置，最後一個 line 在 container 的結束位置。
  
• space-around ： 全部的 line 均勻分佈，每一個 line 周圍的空白空間相等。
  
• stretch （默認值）： 全部的 line 拉伸以填滿剩餘空間。

應用於 flex item 的屬性

order

在默認狀況下，全部的 flex items 按照源代碼中定義的順序佈局。可是， order 屬性控制了 flex item 在 flex container 中顯示的優先級。

.item {
  order: <integer>;
}

flex-grow

該屬性賦予 flex item 生長（grow）的能力。它接受一個無單位的值，並將其做爲比例值，表示在 flex container 中，這個 flex item 可以佔有多大比例的可用空間。
若是全部的 flex item 的 flex-grow 屬性都設置爲1，那麼 container 的剩餘空間將被均勻的分配給全部 flex item。若是當中有一個 item 的 flex-grow 屬性設置爲2，那麼 這個 item 將佔有2倍於其餘 item 佔有的可用空間。

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

負值是非法取值。

flex-shrink
該屬性賦予 flex item 在必要的狀況下收縮的能力。

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

負值是非法取值。

flex-basis
該屬性用於在分配剩餘空間以前定義 flex item 的默認尺寸大小。它的取值能夠爲一個絕對長度值（好比 20%，5rem，等）或者是一個關鍵字。auto 關鍵字表示根據 flex item 自身的 width 和 height 屬性取值肯定。 content 關鍵字表示根據 flex item 的 content 來肯定，可是目前並無獲得很好的支持。

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

若是該屬性取值爲0，那麼在該 flex item 的 content 周圍的額外空間將不被計算在內。若是取值爲 auto，那麼 flex item 的大小將根據 flex-grow 的取值來肯定。能夠參考這張圖。

flex
該屬性爲 flex-grow, flex-shrink 和 flex-basis 的混合簡寫方式。 其中第二個和第三個參數（flex-shrink 和 flex-basis）爲可選參數。該屬性的默認值爲 0 1 auto。

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

align-self

該屬性能夠爲每一個 flex item 指定對齊方式。咱們能夠經過該屬性修改 flex item 默認的或者由 align-items 指定的對齊方式。它的取值說明參考 align-items 的取值說明。

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

注意，float，clear 和 vertical-align 對 flex item 無任何影響。

更多實例請參考原文例子。