CSS Flexbox #1。 創建你的第一個 Flexbox 佈局

已發表: 2022-02-16

2018 年底，我們出版了一本關於 CSS Grid 的書，這是一款正在徹底改變前端網頁設計的佈局工具。 CSS Grid 完全是 CSS 原生的，允許您使用列和行創建基於網格的佈局系統。

《CSS Grid Explained》立即成為我們最暢銷的書籍之一。 因此，我們正在為該書進行大規模更新和擴展。 我們還開始製作一本新書“Flexbox Explained”。 Flexbox 與 CSS Grid 密切相關，但也有明顯的區別：

  • Flexbox 是一種一維佈局模型。 它可以管理列或行。
  • CSS Grid 是一種二維佈局模型。 它可以管理列和行。

在接下來的幾週內，我們將在編寫“Flexbox Explained”時發布一系列 Flexbox 教程。 第一個教程通過實際示例演示了 CSS Flexbox 的基本概念。

Flexbox 簡介

CSS Flexbox 規範描述了在容器 ( flex-container ) 中包含項目 ( flex-items ) 的佈局。 根據可用的容器空間，這些項目的寬度和/或高度可以增加或縮小。 項目“靈活”以盡可能最佳的方式適合父容器。

這些“彎曲”的項目可以在任何方向（內聯軸或塊軸）佈置，因此在更改屏幕大小（寬度或高度）或其方向時提供了很大的靈活性。

您可以通過單擊此鏈接查看 Flexbox W3C 規範。

步驟1。 創建 HTML

讓我們通過使用一些示例代碼創建一個 HTML 文件來開始這個示例。 我為你準備了一些 HTML - 它是一個包含 3 個子元素的容器。

  • 打開您喜歡的代碼編輯器。
  • 創建一個空的 HTML 文件。
  • 訪問此頁面並複制 HTML 代碼
  • 將該代碼粘貼到您的 HTML 文件中。

第2步。 創建 CSS

現在我們有了一個包含 3 個元素的容器，讓我們添加一些樣式。

  • 創建一個名為style.css 的 CSS 文件。 . 將此文件放在與 HTML 文件相同的文件夾中。 此 CSS 文件的鏈接已在您的 HTML 文件的標記中
  • 複製並粘貼此代碼，該代碼也可在 Codepen 上找到：

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

此圖顯示了當您在瀏覽器中打開 HTML 文件時您的代碼將如何顯示。 3 個子項與其父容器一樣寬。 高度由每個項目的內容決定。 注意所有邊的 2rem （在桌面屏幕上約為 32px）的填充。

CSS Flexbox #1。創建你的第一個 Flexbox 佈局

步驟#3。 CSS Flexbox 樣式

現在是時候開始本教程的 Flexbox 部分了。

  • 編輯 CSS 文件並添加以下代碼：

 .container { display: flex; }

此圖像顯示了您的代碼現在的外觀：

發生了什麼變化？ 在技​​術方面，父容器現在是一個flex-container 。 子元素已變成flex-items 。

為什麼容器的大小發生了變化？ 彈性項目不像它們的父容器那麼寬。 它們現在與它們內部的內容一樣寬。 flex-items顯示為左側的浮動元素。 它們的行為類似於內聯元素。

要清楚地看到父容器的寬度，您可以應用background-color ：

  • 編輯 CSS 代碼並添加以下代碼：

 .container { display: flex; background-color: #f5ca3c; }

下面是容器現在的顯示方式：

您已經註意到flex-container行為（大部分）類似於塊級元素。 然而，我們也讓容器表現得像一個內聯元素。 為此，我們將display屬性的值更改為inline-flex 。

  • 編輯 CSS 代碼：

 .container { display: inline-flex; background-color: #f5ca3c;

flex 容器現在是一個內聯級元素，如下圖所示：

在繼續本教程之前，讓我們將行為更改為塊級元素。

  • 編輯 CSS 代碼：

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

步驟4。 將 Flexbox 行更改為列

到目前為止，我們已經創建了一個flex-container 。 我們還看到了這個容器的孩子在變成flex-items時的行為。

現在讓我們學習如何改變佈局的方向。 flex-container的默認方向是基於行的。 但是，您可以使用flex-direction屬性更改此行為。

  • 編輯 CSS 代碼：

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

更新代碼後，您不會看到任何變化，因為flex-direction: row是默認值。 讓我們做一個真正可見的更改：將flex-container的方向編輯為column 。

  • 編輯 CSS 代碼：

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

下一張圖片顯示了佈局的變化：

現在flex-container的方向基於塊軸（列）。 flex-items從上到下對齊，每個項目都佔據其父容器的整個寬度。 因此，它們的行為類似於塊元素。

現在，您可能會在這一點上開始質疑：“嘿，我的佈局現在看起來與本教程中的第一個佈局完全相同！ ”這是真的。 從視覺上看，這個帶有flex-container的當前佈局和這個例子的第一個帶有塊容器的佈局之間沒有區別。

但是，我們現在有了更多的控制權。 例如，您可以使用row-reverse和column-reverse屬性反轉flex-items的方向。

  • 編輯 CSS 代碼：

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

此圖顯示了您的佈局在此新更新後的外觀：

要查看連續反轉的flex-items ，請更改flex-direction屬性的值。

  • 編輯 CSS 代碼：

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

彈性盒總結

恭喜！ 你已經學會瞭如何聲明一個flex-container 。 您已經看到flex-items行為取決於應用於其父容器（ row或column ）的flex-direction 。 你也知道如何顛倒flex-items的順序。

所有這些更改都是使用 CSS 完成的，因此不會影響您網站的 HTML 標記的結構。 這是使用 Flexbox 的優勢之一。 反轉flex-items的順序只是這個 CSS 模塊的特性之一。 有關 Flexbox 的知識還有很多，因此請在幾天后查看本教程的第 2 部分。

本系列更多教程

  • CSS 彈性盒 #2。 如何使用 justify-content 屬性
  • CSS 彈性盒 #3。 align-items 屬性
  • CSS 彈性盒 #4。 flex-grow 屬性