愚人碼頭注：本文在英文原文的基礎(chǔ)上加了一些便于理解的注釋和示例。

什么是 Flexbox ？

Flexbox 是 flexible box 的簡稱（愚人碼頭注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設(shè)備下可預(yù)測地展現(xiàn)出來。

它之所以被稱為 Flexbox ，是因為它能夠擴(kuò)展和收縮 flex 容器內(nèi)的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內(nèi)嵌塊元素）相比，F(xiàn)lexbox 是一個更強(qiáng)大的方式：

• 在不同方向排列元素
• 重新排列元素的顯示順序
• 更改元素的對齊方式
• 動態(tài)地將元素裝入容器

什么情況下不建議使用 Flexbox ？

雖然 Flexbox 非常適合縮放，對齊和重新排序元素，但以下情況應(yīng)該盡量避免使用 Flexbox 布局：

• 整體頁面布局
• 完全支持舊瀏覽器的網(wǎng)站

瀏覽器支持 Flexbox 的情況：

舊版瀏覽器，如IE 11或更低版本，不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面正常呈現(xiàn)，你應(yīng)該退回到其他的 CSS 布局方式，比如結(jié)合float的display: inline-block或者display: table等。但是，如果您只針對現(xiàn)代瀏覽器，那么 Flexbox 絕對值得一試。

術(shù)語

在 Flexbox 模型中，有三個核心概念：
– flex 項（愚人碼頭注：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的布局方向（愚人碼頭注：更多的文章叫主軸）

最好的學(xué)習(xí)方式是從經(jīng)驗和例子中學(xué)習(xí)，所以讓我們開始吧！

Level 1?—?基礎(chǔ)

1）創(chuàng)建一個 flex 容器

.flex-container {
  display: flex;
}

See the Pen Flexbox 1?—?Basic by feiwen8772 (@feiwen8772) on CodePen.0

要創(chuàng)建一個 flex 容器，您只需要將一個display: flex屬性添加到一個元素上。默認(rèn)情況下，所有的直接子元素都被認(rèn)為是 flex 項，并從左到右依次排列在一行中。如果 flex 項的寬度總和大于容器，那么 flex 項將按比例縮小，直到它們適應(yīng) flex 容器寬度。

2）將 flex 項排成一列

.flex-container {
  display: flex;
  flex-direction: column;
}

See the Pen 將flex 項排成一列 by feiwen8772 (@feiwen8772) on CodePen.0

可以通過(在 flex 容器中)設(shè)置flex-direction: column使 flex 項垂直布局。也可以通過設(shè)置flex-direction: column-reverse或flex-direction: row-reverse來使 flex 項以相反的順序排列。

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

See the Pen flex 項以相反的順序排列 by feiwen8772 (@feiwen8772) on CodePen.0

Level 2?—?新手

1）靠右對齊的 flex 項

.flex-container {
  display: flex;
  justify-content: flex-end;
}

回想一下，每個 Flexbox 模型都有 flex 方向（主軸）。justify-content用于指定 flex 項在 flex 方向（direction）上的對齊位置。在上面的例子中，justify-content:flex-end表示 flex 項在水平方向上靠 flex 容器的末端對齊。這就是為什么他們被放在了右邊。

See the Pen 將 flex 項靠右對齊 by feiwen8772 (@feiwen8772) on CodePen.0

2）居中對齊的 flex 項

.flex-container {
  display: flex;
  justify-content: center;
}

See the Pen 居中對齊 flex 項 by feiwen8772 (@feiwen8772) on CodePen.0

3）鋪開的 flex 項

您可以通過使用以下justify-content屬性的三個間距值之一來指定容器中 flex 項之間應(yīng)顯示多少空間：

• space-evenly: flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。（愚人碼頭注：該屬性以前很少看到，原因是以前瀏覽器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly也是這個邏輯，建議在 chrome 60 下查看 這個demo 。 ）
• space-between: 任何兩個相鄰 flex 項之間的間距是相同的，但不一定等于第一個/最后一個 flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最后一個項目之間的間距是相等的。
• space-around: flex 容器中的每個 flex 項的每一側(cè)間距都是相等的。請注意，這意味著兩個相鄰 flex 項之間的空間將是第一個/最后一個 flex 項與其最近邊緣之間的空間的兩倍。

愚人碼頭注：網(wǎng)上找了一張圖片能更好的解釋justify-content屬性值的表現(xiàn)，如圖：

4）flex 項在交叉軸上的對齊

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

通常，我們想沿著 flex 方向（主軸）排列 flex 項，還可以在垂直于它的方向（交叉軸）上對齊 flex 項。通過設(shè)置justify-content:center和align-items:center，可以使 flex 項水平和垂直放置在 flex 容器的中心。

See the Pen flex 項在交叉軸上的對齊 by feiwen8772 (@feiwen8772) on CodePen.0

5）對齊某個特定的 flex 項

.flex-container {
  display: flex;
  align-items: center;
}
.flex-bottom {
  align-self: flex-end;
}

可以在某個特定的 flex 項上使用 align-self CSS 屬性，來使該特定的 flex 項與容器中的其他 flex 項進(jìn)行對齊。

See the Pen 對齊某個特定的 flex 項 by feiwen8772 (@feiwen8772) on CodePen.0

Level 3?—?中級

1）允許 flex 項多行/列排列

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

默認(rèn)情況下， flex 項不允許多行/列排列，如果 flex 容器尺寸對于所有 flex 項來說不夠大，那么flex 項將被調(diào)整大小以適應(yīng)單行或列排列。
通過添加flex-wrap: wrap，可以將溢出容器的 flex 項將被排列到另一行/列中。

See the Pen 允許 flex 項多行/列 by feiwen8772 (@feiwen8772) on CodePen.0

2）flex 項反向多行/列排列

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-wrap:wrap-reverse仍然使 flex 項以多行/列排列，但是它們從 flex 容器的末尾開始排列的。

See the Pen flex 項反向多行/列排列 by feiwen8772 (@feiwen8772) on CodePen.0

3）多行/列排列的 flex 項在交叉軸上的對齊方式

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

默認(rèn)情況下，當(dāng) flex 容器的交叉軸（cross axis）上存在多余空間時，您可以在 flex 容器上設(shè)置align-content，以控制 flex 項在交叉軸（cross axis）上的對齊方式?？赡艿闹凳莊lex-start，flex-end，center，space-between，space-around，space-evenly和stretch（默認(rèn)）。

See the Pen 多行/列排列的 flex 項在交叉軸上的對齊方式 by feiwen8772 (@feiwen8772) on CodePen.0

Level 4?—?高級

1）拉伸 flex 項

.flex-container {
  display: flex;
}
.flex-item.nth-of-type(1){
  flex-grow: 1;
}
.flex-item.nth-of-type(2) {
  flex-grow: 2;
}

flex-grow只有在 flex 容器中有剩余空間時才會生效。flex 項的flex-grow屬性指定該 flex 項相對于其他 flex 項將拉伸多少，以填充 flex 容器。默認(rèn)值為1。當(dāng)設(shè)置為0時，該 flex 項將不會被拉伸去填補(bǔ)剩余空間。在這個例子中，兩個項的比例是 1:2，意思是在被拉伸時，第一個 flex 項將占用 1/3，而第二個 flex 項將占據(jù)余下的空間。

愚人碼頭注：這里特別要注意的是flex-grow控制的是 flex 項的拉伸比例，而不是占據(jù) flex 容器的空間比例。

See the Pen 拉伸 flex 項 by feiwen8772 (@feiwen8772) on CodePen.0

2）收縮元素

.flex-container {
  display: flex;
}
.flex-item:nth-of-type(1) {
  flex-shrink: 1;
}
.flex-item:nth-of-type(2) {
  flex-shrink: 2;
}

flex-shrink只有在 flex 容器空間不足時才會生效。它指定 flex 項相對于其他 flex 項將縮小多少，以使 flex 項不會溢出 flex 容器。 默認(rèn)值為1。當(dāng)設(shè)置為0時，該 flex 項將不會被收縮。在這個例子中，比例是1：2，意思是在收縮時，第一項將收縮 1/3 ，而第二個項目將被收縮 2/3 。愚人碼頭注：flex-shrink和flex-grow正好相反

See the Pen 收縮元素 by feiwen8772 (@feiwen8772) on CodePen.0

3）設(shè)置元素的大小

.flex-container {
  display: flex;
}
.flex-item.nth-of-type(1) {
  flex-basis: 200px;
}
.flex-item.nth-of-type(2) {
  flex-basis: 10%;
}

您可以使用flex-basis定制 flex 項尺寸來代替元素的初始大小。默認(rèn)情況下，其值為flex-basis: auto，這意味該尺寸著從非 Flexbox CSS規(guī)則計算的。您還可以將其設(shè)置為某個絕對值或相對于 flex 容器百分比的值;例如flex-basis:200px和flex-basis:10％。

See the Pen vJXZWK by feiwen8772 (@feiwen8772) on CodePen.0

4）將 flex-grow, flex-shrink, 和 flex-basis 放在一起

.flex-container {
  display: flex;
}
.flex-item:nth-of-type(1) {
  flex: 1 0 100px;
}
.flex-item:nth-of-type(2) {
  flex: 2 0 10%;
}

flex是flex-grow，flex-shrink和flex-based的縮寫。在這個例子中，第一個 flex 項設(shè)置為flex-grow: 1，flex-shrink: 0，flex-basis: 100px，第二個 flex 項設(shè)置為flex-grow: 2，flex-shrink: 0，flex-basis: 10％。

See the Pen vJXZWK by feiwen8772 (@feiwen8772) on CodePen.0

分析一下上面的這個例子，由于在 flex 容器（200px）中存在剩余空間 (90px)，只有flex-grow才能起作用，flew-shrink被忽略。第一個 flex 項的flex-grow為1，第2個 flex 項的flex-grow為2，所以第1個 flex 項拉伸 30px，第2個 flex 項拉伸 60px。

總結(jié)

Flexbox 易于學(xué)習(xí)和操作。 因為 Web 開發(fā)周期短，迭代速度很快，所以對其使用的知識尤其有用。