CSS 佈局

您可以使用多種方法來佈局您的網頁和應用程式。MDN 包含許多關於不同方法的深入指南，此頁面提供了所有方法的概述。

普通流、塊級和內聯佈局

如果您沒有使用 Flex 或 Grid 佈局，那麼您的內容將使用普通流或塊級和內聯佈局進行佈局。這些指南將幫助您瞭解此佈局方法的工作原理。

普通流中的塊級和內聯佈局: 普通流簡介。
流內和流外: 如何將專案移出流，以及這對文件佈局的影響。
格式化上下文解釋: 建立新格式化上下文的簡介。
流佈局和書寫模式: 如果您使用不同的書寫模式（例如垂直文字），流佈局是如何工作的。
流佈局和溢位: 瞭解和管理溢位。
CSS 基本盒模型簡介: 瞭解盒模型是 CSS 的基礎；本指南解釋了它的工作原理。
掌握外邊距摺疊: 瞭解為什麼有時您最終會得到比預期更小的外邊距，這是由於普通流中的外邊距摺疊導致的。
理解 CSS z-index: 絕對定位、Flexbox 和 Grid 都會導致堆疊（元素在 z 軸上的相對位置）可以透過 z-index 屬性進行操作。本文解釋瞭如何管理它。

多列布局

多列布局，通常稱為 multicol，採用普通流中的內容，並將其分成多列。在以下指南中瞭解如何使用此佈局方法。

Multicol 的基本概念: Multicol 基本功能概述。
樣式化列: 列的樣式化機會有限；本指南解釋了您可以執行的操作。
跨列和平衡: 跨列擴充套件元素，並平衡列的內容。
處理 Multicol 中的溢位: 當內容超出可用列空間時會發生什麼？
Multicol 中的內容斷裂: 處理內容斷裂，因為內容被分成多列。

Flexbox

CSS 彈性盒佈局，通常稱為 Flexbox，是一種針對使用者介面設計和一維專案佈局進行最佳化的佈局模型。在 Flex 佈局模型中，Flex 容器的子元素可以向任何方向佈局，並且可以“伸縮”其大小，要麼增長以填充未使用的空間，要麼縮小以避免溢位父元素。

Flexbox 的基本概念: Flexbox 功能概述。
Flexbox 與其他佈局方法的關係: Flexbox 如何與其他佈局方法和其他 CSS 規範相關聯。
在 Flex 容器中對齊專案: 盒對齊屬性如何與 Flexbox 一起工作。
Flex 專案的排序: 解釋更改專案順序和方向的不同方法，並涵蓋執行此操作時可能出現的問題。
控制 Flex 專案沿主軸的比例: 解釋 flex-grow、flex-shrink 和 flex-basis 屬性。
掌握 Flex 專案的換行: 如何建立具有多行的 Flex 容器並控制這些行上專案的顯示。
Flexbox 的典型用例: Flexbox 典型用例的常見設計模式。

網格佈局

CSS 網格佈局為 CSS 引入了一個二維網格系統。網格可用於佈局主要頁面區域或小型使用者介面元素。

網格佈局的基本概念: 網格佈局功能概述。
網格佈局與其他佈局方法的關係: 網格如何與其他方法（如對齊、大小調整和 Flexbox）相關聯。
使用基於行的放置進行佈局: 如何透過編號行放置專案。
網格模板區域: 如何使用網格模板語法放置專案。
使用命名網格線進行佈局: 如何命名線條，以及如何透過線條名稱而不是編號來放置專案。
CSS 網格佈局中的自動放置: 如何管理自動放置演算法，以及瞭解瀏覽器如何放置專案。
CSS 網格佈局中的盒對齊: 如何在網格中對齊專案，並在兩個軸上分配空間。
CSS 網格、邏輯值和書寫模式: 如何在網格中使用流相關屬性和值，而不是物理屬性和值。
CSS 網格佈局和無障礙訪問: 使用網格佈局時需要考慮的一些無障礙訪問事項。
CSS 網格和漸進增強: 如何確保您的網站在不支援網格的瀏覽器中仍然可以正常工作。
使用 CSS 網格實現常見佈局: 使用網格構建一些常見佈局。
子網格: 對子網格值的解釋，它是網格級別 2 的一部分。
砌體佈局: 對網格級別 3 中砌體佈局功能的解釋。

對齊

塊級佈局中的盒對齊: 對齊屬性是為塊級和內聯佈局指定的，但目前還沒有瀏覽器支援。
Flexbox 中的盒對齊: 對齊屬性首先出現在 Flexbox 中；本指南解釋了它們的工作原理。
網格佈局中的盒對齊: 如何在網格佈局中對齊專案。
多列布局中的盒對齊: 對齊如何在 Multicol 中工作。