Flex靈活布局

顯示： 柔性

打開 Flex 布局模式。將一個元素設(shè)置為 Flex 容器，其直接子元素將成為 Flex 項。

.container {
    display: flex;
}

彎曲方向

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

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

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

柔性包裹

控制當(dāng)一行空間不足時是否換行?？蛇x值：

• nowrap（默認）：不換行，物品可能會溢出容器。
• wrap：換行，項目排列成多行。
• wrap-reverse：換行，第一行在底部，后續(xù)行向上排列。

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

證明內(nèi)容合理

定義主軸上的對齊方式?？蛇x值：

• flex-start（默認）：項目與起點對齊。
• flex-end：項目與終點對齊。
• center：項目居中對齊。
• space- Between：均勻分布項目之間的間距，第一個和最后一個項目分別附著在容器的兩端。
• space-around：項目之間均勻分布間距，項目兩側(cè)的間距相等。
• 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;
}

對齊內(nèi)容

僅適用于多行Flex布局（flex-wrap:wrap），定義多行項目在橫軸上的對齊方式?？蛇x值：

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

.container {
    display: flex;
}

命令

定義項目的順序。值越小，階數(shù)越高。默認值為 0。

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

彈性增長

定義項目的放大比例。默認值為0，表示不放大。如果所有項目都設(shè)置為非零值，則剩余空間按比例分配。

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

彎曲收縮

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

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

彈性基礎(chǔ)

定義分配剩余空間之前項目的初始大小。接受長度、百分比、自動（默認）或內(nèi)容值。

.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屬性以定義單個項目在橫軸上的對齊方式?？蛇x值與align-items相同。

.item {
    order: <integer>;
}

網(wǎng)格 網(wǎng)格布局

顯示：網(wǎng)格；

打開網(wǎng)格布局模式。將一個元素設(shè)置為 Grid 容器，其直接子元素將成為 Grid 項（單元格）。

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

網(wǎng)格模板列和網(wǎng)格模板行

定義網(wǎng)格的列軌道和行軌道的大小。接受長度、百分比、fr（分數(shù)單位，表示網(wǎng)格空間的分數(shù)）或auto值。您還可以使用repeat()函數(shù)創(chuàng)建重復(fù)軌道，并使用minmax()函數(shù)定義軌道的最小和最大尺寸。

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

網(wǎng)格模板區(qū)域

通過命名項目并用字符串描述網(wǎng)格結(jié)構(gòu)來定義網(wǎng)格布局的區(qū)域。項目名稱使用 .代表一個空白單元格。

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

網(wǎng)格間隙或網(wǎng)格列間隙和網(wǎng)格行間隙

設(shè)置網(wǎng)格中項目之間的間隙。接受長度或百分比值。

.container {
    display: flex;
}

網(wǎng)格自動列和網(wǎng)格自動行

定義自動填充網(wǎng)格時新添加的行或列的軌道大小。當(dāng)項目超出定義的網(wǎng)格范圍時生效。

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

網(wǎng)格自動流

控制網(wǎng)格項目如何自動填充和排列?？蛇x值：

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

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

網(wǎng)格列開始、網(wǎng)格列結(jié)束、網(wǎng)格行開始和網(wǎng)格行結(jié)束

手動指定網(wǎng)格中項目的開始和結(jié)束位置。

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

網(wǎng)格區(qū)域

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

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

CSS Grid 與 Flexbox 結(jié)合

在某些情況下，我們可以結(jié)合 CSS Grid 和 Flexbox 的優(yōu)點來創(chuàng)建更復(fù)雜的響應(yīng)式布局。

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

首先，CSS Grid 用于創(chuàng)建具有自適應(yīng)列寬的網(wǎng)格布局。每個網(wǎng)格項（子元素）都使用內(nèi)部的 Flexbox 來垂直居中內(nèi)容。當(dāng)屏幕寬度小于 768px 時，媒體查詢切換為單列布局以適應(yīng)移動設(shè)備。

Flexbox 與網(wǎng)格選擇

選擇使用 Flexbox 還是 Grid 通常取決于具體需求：

• Flexbox適合處理一維布局，例如行或列中的元素排列，以及元素對齊和填充。
• CSS Grid 更適合處理二維布局，例如表格或復(fù)雜的網(wǎng)格布局，以及精確的單元格控制。

以上是CSS Flexbox 和 Grid：構(gòu)建響應(yīng)式布局的藝術(shù)的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！