如何使用 CSS Flexbox 並排放置兩個 Div？

使用 CSS 並排放置兩個 Div

在 Web 開發中，需要並排放置元素。在 CSS 中實現此目的的一種方法是透過 Flexbox。

Flexbox 方法

Flexbox 讓您以靈活的網格狀結構佈局元素。要將兩個 div 彼此相鄰放置：

1. 將父容器設定為 Flex： 將 display: flex 加到父 div。這將啟用 Flexbox 佈局。
2. 定義窄 Div： 對於寬度應為 200 像素的 div，將其寬度設為 200 像素。此外，您還可以設定其可見性。
3. 讓左側 Div 填滿剩餘空間： 在剩餘的 div 上使用 flex: 1。此屬性告訴瀏覽器增加 div 以佔據父容器內的剩餘可用空間。

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

<div>

透過遵循此方法，您可以輕鬆並排放置兩個 div，一個具有固定寬度，另一個填充剩餘的螢幕空間。

以上是如何使用 CSS Flexbox 並排放置兩個 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！