首頁 > web前端 > css教學 > 如何使用 CSS Flexbox 並排放置兩個 Div?

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

Mary-Kate Olsen
發布: 2024-12-19 19:04:20
原創
361 人瀏覽過

How Can I Position Two Divs Side-by-Side Using CSS Flexbox?

使用 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板