摘要：對這兩個值添加，則主軸將反轉，而交叉軸保持不變。順序是以組為單位進行分配的。默認情況下所有的彈性項目都設置為，這意味著所有的項目位于同一組，并且它們會按照原始順序進行定位。這是通過文件完成的，它負責跟蹤依賴項及其版本。

原文地址：Flexbox Fundamentals

原文作者：Marina-ferreira

整理自 MDN web docs 的筆記，同時參考了 Web Bos 上的什么是 Flexbox系列視頻。

Flexbox 是 Flexible Box Module 的縮寫。 它是一種布局模型，允許我們方便地控制 html 元素之間的空間分布和對齊 [2]。

Flexbox 一次只能控制一個維度的定位（行或者列）。二維定位的控制需要依靠網(wǎng)格布局 [2]。

給出以下模板：

    

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    

上面 div 的行為默認遵循正常的 html 文檔流，因此從上到下、從左到右進行渲染，并且會占據(jù)整個 body 的寬度，因為它們的 display 屬性默認是 block。

當為 .containerdiv 設置 display: flex 時，所有的直接子 div 將成為彈性項目，并且獲得新的行為 [2]：

由于 flex-direction 默認值為 row，因此它們會呈一行排列

它們將會從左到右排列

項目不會依靠伸展來適應整個寬度（主軸），相反，它們采用收縮的方式

項目將會伸展以適應交叉軸（在這個例子中是高度）。如果各個項目的高度不同，它們將會伸展至與最高的那個項目等高。

flex-basis 默認值為 auto(項目寬度將取決于其自身的內(nèi)容)

flex-wrap 默認值為 nowrap（如果容器的寬度不足以囊括所有的項目，則項目不會換行，只會溢出）

出于可視化的目的，我們拉伸容器以占據(jù)整個高度。

display: flex 使容器拓展整個可用寬度；與之相對的，display: inline-flex 使容器寬度塌陷至與內(nèi)容寬度相等。

一旦聲明為彈性容器，我們就可以將元素看作位于兩條軸中。一條是由 flex-direction 定義的主軸，一條是與前者垂直的交叉軸 [2]。

flex-direction 屬性有四個值: row, row-reverse, column 和 column-reverse.

默認值是 row，它將主軸設置為從左到右的水平方向，而交叉軸從上到下與之垂直相交。同理，column 將主軸設置為從上到下的垂直方向，而交叉軸則是從左到右。對這兩個值添加 reverse ，則主軸將反轉 180°，而交叉軸保持不變 1。

可以通過下圖觀察這些值對應的彈性項目行為：

當容器空間不足以容納全部彈性項目時，利用 flex-wrap 屬性處理彈性項目 [3]。

flex-wrap 的默認值為 nowrap，這意味著如果容器不能在保留項目原始寬度的同時將它們排列成一行的話，項目將會收縮以進行適應。如果由于某些原因無法收縮，則項目會溢出容器外 1。

通過給項目設置 300px 的寬度，nowrap 選項輸出下面這個結果：

其中，每個項目收縮到大約 70px 以適應容器。

當屬性值更新為 wrap 時，項目的寬度將等于原先的值，300px。當?shù)谝恍械膶挾炔蛔阋匀菁{ 300px 時，項目不再溢出容器外，而是會換行 [3]。每一行都應該被視為是一個獨立的彈性容器，任何一個容器內(nèi)的空間分布均不會影響與之相鄰的其他容器 [2]。

但是為什么彈性項目會占據(jù)整個屏幕的高度呢？在第一部分，容器高度被設置為 100vh，因此可用空間被這四行平分以適應 300px 的項目。假如我們沒有設置 100vh，則容器高度將等于項目內(nèi)容的高度，如下圖所示 [1]：

另一個選項是 wrap-reverse，它將會反轉交叉軸。通過屬性 flex-direction 設置的從上到下的方向會被 wrap-reverse 轉化為從下到上 [1]。

通過 flex-direction: column 反轉主軸，容納不下的元素將會換行至另一列，同時剩余空間會被平分 [1]。

wrap-reverse 選項與 column 方向搭配使用，則將反轉交叉軸的方向為從右到左，產(chǎn)生如下輸出：

彈性布局是一維布局，雖然在反轉換行的時候，項目會從下到上排列（在方向為 row 的情況下），但是依然保持著從左到右的結構。改變的只有交叉軸。

flex-direction 和 flex-wrap 可以在一個單屬性中進行聲明： flex-flow: [direction] [wrap] [2]。

.flex-container {
    flex-flow : column wrap;
}

回到主軸方向為 row 且進行換行的情況。通過給項目設置 width: 33.3333%，容器能夠完全被填滿。

但是當你讓子 div 之間有空隙時，它們將不會像預期的那樣進行換行：

可以通過使用 CSS 函數(shù) calc() 解決這個問題 [1]：

.flex-item {
    width: calc(33.33333% - 40px);
    margin: 20px;
}

為了消除容器邊緣的空間，這里對容器設置負外邊距 [3]：

.flex-container {
    margin: -20px;
}

order 屬性允許修改項目的呈現(xiàn)順序。順序是以組為單位進行分配的。默認情況下所有的彈性項目都設置為 order：0 ，這意味著所有的項目位于同一組，并且它們會按照原始順序進行定位。如果有兩個或者兩個以上的組，那么各組將會相對于它們的整數(shù)值進行排序 [4]。

在下面的例子中，有三個順序組， -1， 0 和 1，它們按照如下順序排列。

.box-3 { order:  1; }
.box-7 { order:  1; }
.box-8 { order: -1; }

表面上，這個屬性重新分配了項目，但在諸如使用 tab 鍵對它們進行遍歷的交互中則依然保留它們的原始位置。如果項目順序與可訪問性有關的話，這一點是需要考慮的。同理， flex-direction 也是這樣 [4]。

在彈性布局中，沿著軸的項目對齊和空間分布可以通過四個屬性控制 [5]：

justify-content：將所有項目在主軸上對齊

align-items ：將所有項目在交叉軸上對齊

align-self：將單個項目在主軸上對齊

align-content：控制交叉軸上各條線之間的空間

justify-content 是一個在主軸上處理項目的容器屬性。最常用的 6 個值是： flex-start， flex-end， center， space-around， space-between， space-evenly。其中，默認值為 flex-start。

align-items 同樣是一個容器屬性，它在交叉軸上處理項目的對齊。 默認值是 stretch ，其他值是 flex-start， flex-end， center 和 baseline [5]。

如果設置了容器高度，則 stretch 屬性值會使所有的項目伸展至與容器等高；如果沒有設置，則所有項目與最高的項目等高 [5]。上面第一張圖片中容器高度設置為 100vh，第二張圖片則沒有設置高度。

align-content 是第四個也是最后一個容器屬性，它在交叉軸上分配各條線之間的空間。作為最后一個屬性，它的初始值為 stretch ，并且和 justify-content 一樣接受以下幾個屬性值：flex-start， flex-end， center， space-around， space-between， space-evenly [5]。

align-items 屬性實際上是通過給容器內(nèi)的所有項目設置 align-self 而生效的。通過多帶帶設置 align-self，可以覆蓋先前設置的總的屬性值。該屬性和 align-items 擁有相同的可選值，但是還多了一個 ‘a(chǎn)uto’ [5]。

auto 會重置 align-self 的值，使之重新等于通過 align-items 給容器全局定義的值 [5]。

項目的大小和彈性可以通過三個屬性控制：flex-grow，flex-shrink 和 flex-basis。這些屬性都在主軸上發(fā)揮作用 [2]。

flex-grow：如果有額外空間，每個項目應該如何伸展

flex-shrink：如果空間不足，每個項目應該如何收縮

flex-basis：在設置以上兩個屬性之前項目的大小

該屬性設置的是彈性增長系數(shù)，這是一個用于處理項目之間相對大小的比率 [7]。

默認值是 0，這意味著如果有剩余空間，就把這個空間放在最后一個項目的后面 [1]。

在上面的例子中，direction 設置為 row，每個彈性項目的寬度是 60px。由于容器的寬度是 980px ，因此有 680px 的可用空間，這個空間稱為 正向自由空間 [7]。

通過將 flex-grow 設置為 1，正向自由空間將會被彈性項目平分。每個項目的寬度都會增加 136px，總的寬度是 196px [7]。

通過給第三個項目設置 flex-grow: 2 ，它獲得的可用正向自由空間是其他項目的兩倍，即比起其他項目的 173px ，它的總寬度為 286px [7]。

下圖中，項目的 flex-grow 屬性設置為自身的內(nèi)容值。

當容器沒有足夠空間來容納所有項目時，使用 flex-shrink 處理項目大小。因此，它通過收縮項目來處理它們的負向自由空間 [7]。

如下圖所示，980px 的容器存放著 5 個 300px 寬度的容器。由于沒有足夠空間來容納所需要的 1500px，默認的彈性收縮系數(shù) 1 會使每個項目收縮至 196px。

通過給第三個項目設置 2 的比率，它會比其它項目小兩倍。

下圖中，每個項目以自身內(nèi)容值作為彈性收縮比率。

flex-basis 屬性會在實際設置可用空間之前檢查每個項目應該具有的大小。默認值是 auto，項目寬度要么通過 width 顯式設置，要么等于內(nèi)容寬度。它同樣也接受像素值 [7]。

下面的 gif 展示了一個 800px 寬度的容器和 5 個設置了 flex-basis: 160px 的彈性項目。這告訴瀏覽器：理想情況下有足夠的空間放置所有的項目，項目的 160px 寬度將會得到保留，并且沒有正向/負向自由空間。如果沒有足夠的空間，由于 flex-shrink 默認為 1，所有的項目會均勻地收縮。如果有剩余的空間，由于 flex-grow 默認為 0，剩余空間會放置在最后一個項目的后面。

下面的 gif 中，項目 1 設置為 flex-shrink: 10，項目 4 設置為 flex-grow: 10。對于負向自由空間，項目 1 減小的寬度是其它項目減小寬度的 10 倍；對于正向自由空間，項目 4 增加的寬度是其它項目增加寬度的 10 倍。

flex-basis 還可以接受值 content。此時，無論有沒有設置 width，自由空間計算都只會基于項目內(nèi)容去計算寬度。如果你不打算在計算時考慮項目寬度，則將其設置為 0。

flex 是 flex-grow， flex-shrink 和 flex-basis 的簡寫屬性 [2]。

它接受下面的預定于值：

initial：重置為彈性布局的默認值，與 flex: 0 1 auto 效果一樣

auto：彈性項目可以根據(jù)需要伸展/收縮，與 flex: 1 1 auto 效果一樣

none：使項目失去彈性，與 flex: 0 0 auto 效果一樣

flex: 1：彈性項目可以伸展/收縮，并且 flex-basis 設置為 0 ，與 flex: 1 1 0 效果一樣

考慮到跨瀏覽器兼容性，給屬性加上所有必要的前綴很重要，這可以確保提供全面的支持 [1]。

手動給每個屬性添加前綴是一項非常繁瑣的任務，并且還會徒增樣式維護的難度。作為替代方法，Gulp 可以自動化地完成這些任務。

要使用 Gulp，我們需要將其作為依賴項添加到項目中。這是通過 package.json 文件完成的，它負責跟蹤依賴項及其版本。通過終端創(chuàng)建文件類型 [1]：