如何使用CSS網格和Flexbox一起教程

CSS Grid 和Flexbox 各有專長，配合使用效果最佳。 Grid 是二維佈局，適合整體頁面結構，如頁頭、側邊欄、主內容區、頁腳的安排；Flexbox 是一維佈局，更適合組件內部排列，如導航欄、按鈕組、卡片列表等。例如三欄佈局中間再上下分塊用Grid，幾個按鈕排成一排自動對齊則用Flexbox。實際組合方式為：外層容器用display: grid 定義整體框架，各區域內使用display: flex 排列子元素。常見結構包括頁面整體用Grid 切分區塊，導航條、按鈕組和卡片列表內部用Flexbox 對齊元素。注意點是不要在同一個容器上同時設置Grid 和Flexbox，父級用了Grid 後，子級需單獨設置display: flex 才能生效，嵌套結構中也應避免層級過深導致維護困難。

當你want 做一個現代網頁佈局，CSS Grid 和Flexbox 是兩個最實用的工具。它們各自擅長不同場景，但配合使用時可以解決大多數複雜佈局問題。關鍵不是選誰用誰，而是知道在什麼情況下用哪個。

什麼時候用Grid，什麼時候用Flexbox？

簡單來說： Grid 是二維佈局（行和列一起控制） ，適合整體頁面結構，比如把頁頭、側邊欄、主內容區、頁腳安排好。而Flexbox 是一維佈局（一次只控制一行或一列） ，更適合組件內部排列，比如導航欄、按鈕組、卡片列表等。

舉個例子：

• 如果你做一個三欄佈局，中間還能上下分塊，那Grid 更合適。
• 如果你只是想讓幾個按鈕排成一排，並且自動對齊，Flexbox 更直接。

所以，一個完整的頁面裡，你可以外層用Grid 分區域，內部用Flexbox 排元素。

實際怎麼組合使用？看結構

常見的做法是：

• 外層容器用display: grid ，定義整個頁面的框架
• 每個區域內再使用display: flex來排列子元素

例如：

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

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

這樣左邊欄就變成了垂直分佈的結構，而且不會影響其他區域的佈局方式。

常見組合結構：

• 頁面整體用Grid 切分區塊
• 導航條、按鈕組用Flexbox
• 卡片列表內部用Flexbox 對齊標題、圖片等元素

注意點：別搞混了方向和層級

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

• 不要在一個容器上同時設置Grid 和Flexbox，因為只會生效一個
• 父級用了Grid，子級要用Flexbox 的話，必須單獨給那個子級設置display: flex
• 在嵌套結構中，盡量保持邏輯清晰，不要層層嵌套太深，否則維護起來麻煩

舉個實際會踩坑的例子：

 <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;
}

這個寫法沒問題，但如果你不小心在.flex-box上又加了個grid屬性，那它就會變成Grid 容器，Flex 就失效了。

基本上就這些。剛開始可能會覺得有點繞，但只要記住： Grid 控制大結構，Flexbox 負責細節排列，然後在不同層級分開使用，就能輕鬆搞定大多數佈局需求了。

以上是如何使用CSS網格和Flexbox一起教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！