Flex靈活布局

顯示： 柔性

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

.container {
    display: flex;
}

彎曲方向

定義主軸方向（項(xiàng)目排列方向）。可選值：

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

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

柔性包裹

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

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

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

證明內(nèi)容合理

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

• flex-start（默認(rèn)）：項(xiàng)目與起點(diǎn)對(duì)齊。
• flex-end：項(xiàng)目與終點(diǎn)對(duì)齊。
• center：項(xiàng)目居中對(duì)齊。
• space- Between：均勻分布項(xiàng)目之間的間距，第一個(gè)和最后一個(gè)項(xiàng)目分別附著在容器的兩端。
• space-around：項(xiàng)目之間均勻分布間距，項(xiàng)目兩側(cè)的間距相等。
• space-evenly：均勻分布item之間的間距，item與容器邊緣的間距以及item之間的間距相等。

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

對(duì)齊項(xiàng)目

定義交叉軸上的對(duì)齊方式?？蛇x值：

• 拉伸（默認(rèn)）：項(xiàng)目拉伸以填充整個(gè)橫軸。
• flex-start：項(xiàng)目與橫軸的起點(diǎn)對(duì)齊。
• flex-end：項(xiàng)目與橫軸的末端對(duì)齊。
• center：項(xiàng)目以橫軸為中心。
• 基線：項(xiàng)目按基線對(duì)齊。

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

對(duì)齊內(nèi)容

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

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

.container {
    display: flex;
}

命令

定義項(xiàng)目的順序。值越小，階數(shù)越高。默認(rèn)值為 0。

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

彈性增長

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

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

彎曲收縮

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

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

彈性基礎(chǔ)

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

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

彎曲

flex-grow、flex-shrink 和 flex-basis 的簡寫。默認(rèn)為 0 1 自動(dòng)。

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

自我對(duì)齊

覆蓋容器的align-items屬性以定義單個(gè)項(xiàng)目在橫軸上的對(duì)齊方式。可選值與align-items相同。

.item {
    order: <integer>;
}

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

顯示：網(wǎng)格；

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

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

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

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

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

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

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

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

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

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

.container {
    display: flex;
}

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

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

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

網(wǎng)格自動(dòng)流

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

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

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

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

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

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

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

同時(shí)設(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)點(diǎn)來創(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)格布局。每個(gè)網(wǎng)格項(xiàng)（子元素）都使用內(nèi)部的 Flexbox 來垂直居中內(nèi)容。當(dāng)屏幕寬度小于 768px 時(shí)，媒體查詢切換為單列布局以適應(yīng)移動(dòng)設(shè)備。

Flexbox 與網(wǎng)格選擇

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

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

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