Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。

介紹

Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。

與 CSS Grid（雙維）相比，flexbox 是一種單維度佈局模型。它根據行或列對佈局進行控制，但不能同時進行控制。

Flexbox 的主要目標是允許項目根據您設置的某些規則填充其容器提供的整個空間。

除非您需要支援像 IE8 和 IE9 這樣的舊瀏覽器，否則 Flexbox 是一個讓您忘記使用以下工具的工具:

  • 表格佈局
  • 漂浮
  • clearfix hacks
  • display: table hacks

讓我們深入研究 flexbox，並在非常短的時間內成為它的大師吧。

瀏覽器支援

截至撰寫本文（2018 年 2 月），它獲得了 97.66% 的用戶支援，所有最重要的瀏覽器都已實施它多年，因此即使是舊瀏覽器（包括 IE10+）也得到了支援:

瀏覽器支援

雖然我們必須等待幾年讓用戶趕上 CSS Grid，但 Flexbox 是一個較舊的技術，現在可以使用。

啟用 Flexbox

通過設置

display: flex;

或

display: inline-flex;

將 flexbox 佈局應用於容器，將使用 flexbox 對容器內的內容進行對齊。

容器屬性

某些 flexbox 屬性應用於容器，它為其項目設置通用規則。它們是

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

對齊行或列

我們首先看到的第一個屬性 flex-direction，確定容器是否應將其項目作為行或列對齊:

  • flex-direction: row 將項目作為行對齊，在文字方向上（對於西方國家向左到右）
  • flex-direction: row-reverse 將項目按相同方式（從右到左）排列
  • flex-direction: column 將項目作為列對齊，從頂部到底部排序
  • flex-direction: column-reverse 將項目按相同方式（從下到上）排列

行或列

垂直和水平對齊

如果 flex-direction 是 row，則項目默認從左侧開始；如果 flex-direction 是 column，則項目從頂部開始。

您可以使用 justify-content 更改水平對齊，使用 align-items 更改垂直對齊。

更改水平對齊

justify-content 有 5 個可能的值:

  • flex-start：對齊容器的左側。
  • flex-end：對齊容器的右側。
  • center：在容器的中間對齊。
  • space-between：等距顯示它們。
  • space-around：周圍等距顯示它們。

水平對齊

更改垂直對齊

align-items 有 5 個可能的值:

  • flex-start：對齊容器的頂部。
  • flex-end：對齊容器的底部。
  • center：對齊容器的垂直中心。
  • baseline：以容器的基線顯示。
  • stretch：項目被拉伸以適應容器。

垂直對齊

關於 baseline 的注意事項

在這個例子中，baseline 看起來與 flex-start 類似，這是因為我的框太簡單了。查看 這個 Codepen 以獲得一個更有用的示例，它是從 Martin Michálek 最初創建的一個 Pen 衍生而來的。正如您在那裡看到的，項目的尺寸是對齊的。

包裝

默認情況下，flexbox 容器中的項目保持在單一行上，將它們收縮以適應容器。

要強制項目擴展到多行，使用 flex-wrap: wrap。這將根據 flex-direction 中設置的順序分配項目。使用 flex-wrap: wrap-reverse 來反轉此順序。

一種名為 flex-flow 的縮寫屬性允許您在一行中指定 flex-direction 和 flex-wrap，先添加 flex-direction 值，然後是 flex-wrap 值，例如：flex-flow: row wrap。

適用於每個單個項目的屬性

至此，我們已經看到了您可以應用於容器的屬性。

單個項目可以具有一定的獨立性和靈活性，您可以使用這些屬性來更改它們的外觀:

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

讓我們詳細看一下它們。

使用順序在其他項目之前/之後移動項目

項目根據分配的順序進行排序。默認情況下，每個項目的順序都為 0，HTML 中的出現順序確定了最終順序。

您可以使用 order 在每個單獨的項目上覆蓋此屬性。這是一個您在項目上設置的屬性，而不是在容器中設置的屬性。您可以通過設置負值使項目顯示在所有其他項目之前。

在其他項目之前或之後移動項目

使用 align-self 進行垂直對齊

項目可以使用 align-self 選擇覆蓋容器的 align-items 設置，該設置與 align-items 具有相同的五個可能值:

  • flex-start：對齊容器的頂部。
  • flex-end：對齊容器的底部。
  • center：對齊容器的垂直中心。
  • baseline：以容器的基線顯示。
  • stretch：項目被拉伸以適應容器。

垂直對齊

根據需要增加或減少項目的大小

flex-grow

任何項目的默認值為 0。

如果所有項目都定義為 1，並且一個項目定義為 2，那麼較大的元素將占用兩個“1”項目的空間。

flex-shrink

任何項目的默認值為 1。

如果所有項目都定義為 1，並且一個項目定義為 3，那麼較大的元素將以其他元素的3倍收縮。當可用空間較少時，它將佔用三倍的較小空間。

flex-basis

如果設置為 auto，則根據其寬度或高度對項目進行大小調整，並基於 flex-grow 屬性添加額外的空間。

如果設置為 0，在計算佈局時，它不會增加任何額外的空間。

如果指定像素數值，則將其用作長度值（寬度或高度取決於項目是行還是列）。

flex

該屬性結合了上面的三個屬性:

  • flex-grow
  • flex-shrink
  • flex-basis

並提供了縮略語語法: flex: 0 1 auto