CSS Flexbox彈性盒子模型總結

1. 背景

彈性盒子佈局指在提供一個爲容器內的items進行更有效率的排列，分配空間以及佈局的方式，彈性的意思是即使items的尺寸是未知或者動態的也可使用！

這種佈局的理念主要是給容器一種能力能夠調節修改items的寬度高度和順序來充分利用容器內可用的空間---甚至能夠適應幾乎全部的設備和屏幕尺寸。

更重要的是，彈性盒子佈局的方向是不可知的，這個與常規的佈局相反（塊佈局是垂直方向的而行內則是水平基準的），雖然方向這個概念對於pages來講很好，可是它缺少靈活性來支持一些更大的更復雜的應用（尤爲是當方向改變，尺寸變化，拉伸縮小時）

注意：彈性盒子模型更適用於組件化的應用以及小規模佈局，大規模佈局能夠用Grid佈局

2. 基礎和術語

這部分介紹彈性盒子模型中容器和其中Item的屬性

2.1 容器屬性

display

咱們須要經過display屬性來定義一個容器爲Flexbox

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

flex-direction

經過該屬性能夠定義容器內item主軸的方向，items就會沿着主軸排列。Flexbox是單方向佈局模型。你能夠考慮把容器內item橫着排列或者豎着排列。

注意：下面的一些圖示和示例都按照flex-direction爲row的狀況編寫。

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

• row（default）：橫向正向排列
• row-reverse：橫向反向排列
• column：縱向正向排列
• column-reverse：縱向反向排列

flex-wrap

默認狀況下，彈性容器內的items傾向於在單行內佈局。你能夠經過這個屬性來容許容器嘗試多行佈局。

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

nowrap(default):只容許單行佈局
wrap:容許多行佈局
wrap-reverse：容許多行佈局（反向）

flex-flow

這個屬性只是上面兩個屬性縮寫，默認屬性是row nowrap：

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

justify-content

這個屬性定義了items沿着主軸的排列方式，它能夠幫助全部佈局在一行的彈性item
s合理的經過不一樣方式來使用剩餘的空間，同時也會對溢出的items進行分配：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start(default):左對齊（依據flex-direction）
• flex-end：右對齊（同上）
• start：左對齊（不過不是根據flex-direction，而是根據根元素的writing-mode屬性，這是用於決定整個頁面行佈局的方向）
• end：右對齊（同上）
• left：左對齊（容器的左邊沿，若flex-direction屬性不適用，那具體表現等同start）
• right：右對齊（同上）
• center：居中
• space-between：沿主軸方向，等間距排列，首末子組件與父組件相距0
• space-around：沿主軸方向，等間距排列，首末子組件與父組件相距1/2個間距

注意不一樣的瀏覽器對上述屬性支持有差別的，目前適配比較好的屬性包括flex-start，flex-end和center。

最後咱們能夠添加一個額外的屬性safe和unsafe：

• safe：確保你沒法將那些自己就渲染出屏幕外的且瀏覽器content沒辦法到達進行處理
• unsafe：上述操做能夠

align-items

這個定義了items沿着次軸（主軸交叉軸，例如主軸是X軸，次軸就是Y軸）的排列方式，具體內容和上面屬性相似：

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（default）：拉伸item來充滿容器，但遵照min-width和max-width屬性
• flex-start/start/self-start:左對齊，不一樣點在於根據flex-direction仍是writing-mode
• flex-end/end/self-end：右對齊，區別同上
• center：居中
• baseline：與他們的基線對齊

align-content

這個一樣也是針對次軸進行排列，和上述不一樣的是這個屬性針對是多行的狀況下，若是隻有一行這個屬性是沒用的（能夠用上一個屬性代替）

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

具體屬性就不說明了。

2.2 items屬性

order

這個屬性用於決定flex容器中items排列的順序，order越大越日後

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

這個屬性定義了item是否有能力在有必要的狀況下擴展本身的尺寸，定義了在flex容器中item自身能夠佔用的空間比例。

若是全部的item這個值都設置爲1，那麼容器內可用空間將會均等分配給全部的子item，若是一個子item的屬性值是2，它將會佔有其餘item空間的2倍

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

flex-shrink

這個屬性定義了一個item可用縮小的能力，用法相似上面屬性：

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

flex-basis

這個屬性定義了一個元素在剩餘空間進行分配以前的默認尺寸，例如20%,5rem這樣。

auto關鍵詞意味着讓容器看着item本身的寬度或高度來決定（目前暫時是經過main-size關鍵詞來實現的），會根據flex-grow的值進行分配

content關鍵詞意味着默認尺寸參考item的內容大小，這個屬性還沒實現，暫時用不了...

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

flex

flex-grow，flex-shrink，flex-basis三者屬性的縮寫方式。

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

比較推薦用這個屬性來代替上面寫法。

align-self

這個屬性用於單個item覆蓋容器的默認排列方式（經過align-items指定的）

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

3. 瀏覽器支持

經過不一樣Flexbox版本區分:

• (new) means the recent syntax from the specification (e.g. display: flex;)
• (tweener) means an odd unofficial syntax from 2011
• (e.g. display: flexbox;)

(old) means the old syntax from 2009 (e.g. display: box;)

4. 參考資料

CSS-trick的指導

React-Native之Flex佈局

flex佈局中align-items 和align-content的區別