CSS Grid 和 Flexbox 各有專長(zhǎng)，配合使用效果最佳。Grid 是二維布局，適合整體頁(yè)面結(jié)構(gòu)，如頁(yè)頭、側(cè)邊欄、主內(nèi)容區(qū)、頁(yè)腳的安排；Flexbox 是一維布局，更適合組件內(nèi)部排列，如導(dǎo)航欄、按鈕組、卡片列表等。例如三欄布局中間再上下分塊用 Grid，幾個(gè)按鈕排成一排自動(dòng)對(duì)齊則用 Flexbox。實(shí)際組合方式為：外層容器用 display: grid 定義整體框架，各區(qū)域內(nèi)使用 display: flex 排列子元素。常見(jiàn)結(jié)構(gòu)包括頁(yè)面整體用 Grid 切分區(qū)塊，導(dǎo)航條、按鈕組和卡片列表內(nèi)部用 Flexbox 對(duì)齊元素。注意點(diǎn)是不要在同一個(gè)容器上同時(shí)設(shè)置 Grid 和 Flexbox，父級(jí)用了 Grid 后，子級(jí)需單獨(dú)設(shè)置 display: flex 才能生效，嵌套結(jié)構(gòu)中也應(yīng)避免層級(jí)過(guò)深導(dǎo)致維護(hù)困難。

當(dāng)你 want 做一個(gè)現(xiàn)代網(wǎng)頁(yè)布局，CSS Grid 和 Flexbox 是兩個(gè)最實(shí)用的工具。它們各自擅長(zhǎng)不同場(chǎng)景，但配合使用時(shí)可以解決大多數(shù)復(fù)雜布局問(wèn)題。關(guān)鍵不是選誰(shuí)用誰(shuí)，而是知道在什么情況下用哪個(gè)。

什么時(shí)候用 Grid，什么時(shí)候用 Flexbox？

簡(jiǎn)單來(lái)說(shuō)：Grid 是二維布局（行和列一起控制），適合整體頁(yè)面結(jié)構(gòu)，比如把頁(yè)頭、側(cè)邊欄、主內(nèi)容區(qū)、頁(yè)腳安排好。而 Flexbox 是一維布局（一次只控制一行或一列），更適合組件內(nèi)部排列，比如導(dǎo)航欄、按鈕組、卡片列表等。

舉個(gè)例子：

• 如果你做一個(gè)三欄布局，中間還能上下分塊，那 Grid 更合適。
• 如果你只是想讓幾個(gè)按鈕排成一排，并且自動(dòng)對(duì)齊，F(xiàn)lexbox 更直接。

所以，一個(gè)完整的頁(yè)面里，你可以外層用 Grid 分區(qū)域，內(nèi)部用 Flexbox 排元素。

實(shí)際怎么組合使用？看結(jié)構(gòu)

常見(jiàn)的做法是：

• 外層容器用 display: grid，定義整個(gè)頁(yè)面的框架
• 每個(gè)區(qū)域內(nèi)再使用 display: flex 來(lái)排列子元素

例如：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

這樣左邊欄就變成了垂直分布的結(jié)構(gòu)，而且不會(huì)影響其他區(qū)域的布局方式。

常見(jiàn)組合結(jié)構(gòu)：

• 頁(yè)面整體用 Grid 切分區(qū)塊
• 導(dǎo)航條、按鈕組用 Flexbox
• 卡片列表內(nèi)部用 Flexbox 對(duì)齊標(biāo)題、圖片等元素

注意點(diǎn)：別搞混了方向和層級(jí)

雖然兩者能一起用，但要注意一些容易出錯(cuò)的地方：

• 不要在一個(gè)容器上同時(shí)設(shè)置 Grid 和 Flexbox，因?yàn)橹粫?huì)生效一個(gè)
• 父級(jí)用了 Grid，子級(jí)要用 Flexbox 的話，必須單獨(dú)給那個(gè)子級(jí)設(shè)置 display: flex
• 在嵌套結(jié)構(gòu)中，盡量保持邏輯清晰，不要層層嵌套太深，否則維護(hù)起來(lái)麻煩

舉個(gè)實(shí)際會(huì)踩坑的例子：

<div class="grid-container">
  <div class="flex-box">
    <span>Item 1</span>
    <span>Item 2</span>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.flex-box {
  display: flex;
  gap: 10px;
}

這個(gè)寫法沒(méi)問(wèn)題，但如果你不小心在 .flex-box 上又加了個(gè) grid 屬性，那它就會(huì)變成 Grid 容器，F(xiàn)lex 就失效了。

基本上就這些。剛開(kāi)始可能會(huì)覺(jué)得有點(diǎn)繞，但只要記?。?strong>Grid 控制大結(jié)構(gòu)，F(xiàn)lexbox 負(fù)責(zé)細(xì)節(jié)排列，然后在不同層級(jí)分開(kāi)使用，就能輕松搞定大多數(shù)布局需求了。

以上是如何使用CSS網(wǎng)格和Flexbox一起教程的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！