CSS Flexbox 和 Grid：建構響應式佈局的藝術

Flex靈活佈局

顯示： 柔性

開啟 Flex 版面模式。將一個元素設定為 Flex 容器，其直接子元素將成為 Flex 項。

.container {
    display: flex;
}

彎曲方向

定義主軸方向（項目排列方向）。可選值：

• 行（預設）：水平，從左到右。
• row-reverse：水平方向，由右到左。
• 列：垂直，由上到下。
• column-reverse：垂直，由下往上。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

柔性包裹

控制當一行空間不足時是否換行。可選值：

• nowrap（預設）：不換行，物品可能會溢出容器。
• wrap：換行，項目排列成多行。
• wrap-reverse：換行，第一行在底部，後續行向上排列。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

證明內容合理

定義主軸上的對齊方式。可選值：

• flex-start（預設）：專案與起點對齊。
• flex-end：項目與終點對齊。
• center：專案居中對齊。
• space- Between：均勻分佈項目之間的間距，第一個和最後一個項目分別附著在容器的兩端。
• space-around：項目間均勻分佈間距，項目兩側的間距相等。
• space-evenly：均勻分佈item之間的間距，item與容器邊緣的間距以及item之間的間距相等。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

對齊項目

定義交叉軸上的對齊方式。可選值：

• 拉伸（預設）：項目拉伸以填充整個橫軸。
• flex-start：專案與橫軸的起點對齊。
• flex-end：項目與橫軸的末端對齊。
• center：專案以橫軸為中心。
• 基線：項目依基線對齊。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

對齊內容

僅適用於多行Flex版面（flex-wrap:wrap），定義多行項目在橫軸上的對齊方式。可選值：

• 拉伸（預設）：每行拉伸以填充整個交叉軸。
• flex-start：每行與交叉軸的起點對齊。
• flex-end：每行與交叉軸的末端對齊。
• center：每行與交叉軸的中心對齊。
• space- Between：均勻分佈每行之間的空間，第一行和最後一行分別附著在容器的兩端
• space-around：均勻分佈每行之間的空間，且行兩側的空間相等。

.container {
    display: flex;
}

命令

定義項目的順序。值越小，階數越高。預設值為 0。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

彈性成長

定義項目的放大比例。預設值為0，表示不放大。如果所有項目都設定為非零值，則剩餘空間按比例分配。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

彎曲收縮

定義項目的收縮率。預設為1，意味著它可以收縮。如果所有項目都設定為非零值，它們會按比例縮小以防止溢出容器。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

彈性基礎

定義分配剩餘空間之前項目的初始大小。接受長度、百分比、自動（預設）或內容值。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

彎曲

flex-grow、flex-shrink 和 flex-basis 的簡寫。預設為 0 1 自動。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

自我對齊

覆蓋容器的align-items屬性以定義單一項目在橫軸上的對齊方式。可選值與align-items相同。

.item {
    order: <integer>;
}
</integer>

網格 網格佈局

顯示：網格；

開啟網格佈局模式。將一個元素設定為 Grid 容器，其直接子元素將成為 Grid 項目（單元格）。

.item {
    flex-grow: <number>; /* Default is 0 */
}
</number>

網格模板列和網格模板行

定義網格的列軌道和行軌道的大小。接受長度、百分比、fr（分數單位，表示網格空間的分數）或auto值。您也可以使用repeat()函數建立重複軌道，並使用minmax()函數定義軌道的最小和最大尺寸。

.item {
    flex-shrink: <number>; /* defaults to 1 */
}
</number>

網格模板區域

透過命名項目並用字串描述網格結構來定義網格佈局的區域。項目名稱使用 .代表一個空白單元格。

.item {
    flex-basis: <length> | <percentage> | auto | content;
}
</percentage></length>

網格間隙或網格列間隙和網格行間隙

設定網格中項目之間的間隙。接受長度或百分比值。

.container {
    display: flex;
}

網格自動列和網格自動行

定義自動填滿網格時新新增的行或列的軌道大小。當項目超出定義的網格範圍時生效。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

網格自動流

控制網格項目如何自動填滿和排列。可選值：

• 行（預設）：按行填滿。
• 列：按列填寫。
• dense：當row或column與dense一起使用時，如果網格中有間隙，新的項目將嘗試填充這些間隙，而不是僅僅將它們添加到網格的末尾。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

網格列開始、網格列結束、網格行開始和網格行結束

手動指定網格中項目的開始和結束位置。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

網格區域

同時設定 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫屬性，或引用 grid-template-areas 中定義的區域名稱。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

CSS Grid 與 Flexbox 結合

在某些情況下，我們可以結合 CSS Grid 和 Flexbox 的優點來建立更複雜的響應式佈局。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

首先，CSS Grid 用於建立具有自適應列寬的網格佈局。每個網格項目（子元素）都使用內部的 Flexbox 來垂直居中內容。當螢幕寬度小於 768px 時，媒體查詢會切換為單列佈局以適應行動裝置。

Flexbox 與網格選擇

選擇使用 Flexbox 還是 Grid 通常取決於特定需求：

• Flexbox適合處理一維佈局，例如行或列中的元素排列，以及元素對齊和填充。
• CSS Grid 更適合處理二維佈局，例如表格或複雜的網格佈局，以及精確的單元格控制。

以上是CSS Flexbox 和 Grid：建構響應式佈局的藝術的詳細內容。更多資訊請關注PHP中文網其他相關文章！