Flex靈活佈局

顯示： 柔性

開啟 Flex 版面模式。將一個(gè)元素設(shè)定為 Flex 容器，其直接子元素將成為 Flex 項(xiàng)。

.container {
    display: flex;
}

彎曲方向

定義主軸方向（項(xiàng)目排列方向）?？蛇x值：

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

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

柔性包裹

控制當(dāng)一行空間不足時(shí)是否換行。可選值：

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

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

證明內(nèi)容合理

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

• flex-start（預(yù)設(shè)）：專案與起點(diǎn)對(duì)齊。
• flex-end：項(xiàng)目與終點(diǎn)對(duì)齊。
• center：專案居中對(duì)齊。
• space- Between：均勻分佈項(xiàng)目之間的間距，第一個(gè)和最後一個(gè)項(xiàng)目分別附著在容器的兩端。
• space-around：項(xiàng)目間均勻分佈間距，項(xiàng)目?jī)蓚?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值：

• 拉伸（預(yù)設(shè)）：項(xiàng)目拉伸以填充整個(gè)橫軸。
• flex-start：專案與橫軸的起點(diǎn)對(duì)齊。
• flex-end：項(xiàng)目與橫軸的末端對(duì)齊。
• center：專案以橫軸為中心。
• 基線：項(xiàng)目依基線對(duì)齊。

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

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

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

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

.container {
    display: flex;
}

命令

定義項(xiàng)目的順序。值越小，階數(shù)越高。預(yù)設(shè)值為 0。

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

彈性成長(zhǎng)

定義項(xiàng)目的放大比例。預(yù)設(shè)值為0，表示不放大。如果所有項(xiàng)目都設(shè)定為非零值，則剩餘空間按比例分配。

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

彎曲收縮

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

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

彈性基礎(chǔ)

定義分配剩餘空間之前項(xiàng)目的初始大小。接受長(zhǎng)度、百分比、自動(dòng)（預(yù)設(shè)）或內(nèi)容值。

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

彎曲

flex-grow、flex-shrink 和 flex-basis 的簡(jiǎn)寫。預(yù)設(shè)為 0 1 自動(dòng)。

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

自我對(duì)齊

覆蓋容器的align-items屬性以定義單一項(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)格的列軌道和行軌道的大小。接受長(zhǎng)度、百分比、fr（分?jǐn)?shù)單位，表示網(wǎng)格空間的分?jǐn)?shù)）或auto值。您也可以使用repeat()函數(shù)建立重複軌道，並使用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)目之間的間隙。接受長(zhǎng)度或百分比值。

.container {
    display: flex;
}

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

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

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

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

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

• 行（預(yù)設(shè)）：按行填滿。
• 列：按列填寫。
• 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 的簡(jiǎn)寫屬性，或引用 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)來建立更複雜的響應(yīng)式佈局。

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

首先，CSS Grid 用於建立具有自適應(yīng)列寬的網(wǎng)格佈局。每個(gè)網(wǎng)格項(xiàng)目（子元素）都使用內(nèi)部的 Flexbox 來垂直居中內(nèi)容。當(dāng)螢?zāi)粚挾刃§?768px 時(shí)，媒體查詢會(huì)切換為單列佈局以適應(yīng)行動(dòng)裝置。

Flexbox 與網(wǎng)格選擇

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

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

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