首頁 > web前端 > css教學 > 主體

如何讓 Flexbox 兒童利用可用空間來劃分不同的高度?

Susan Sarandon
發布: 2024-11-08 11:37:02
原創
278 人瀏覽過

How Can I Make Flexbox Children Utilize Available Space for Separate Heights?

確保Flexbox 子項利用可用空間實現獨立高度

問題:

在具有兩列的Flexbox 佈局中,如何不同尺寸的元素是否可以分佈以填充整個可訪問區域,而不是與最高的元素具有相同的高度element?

上下文:

使用flexbox的flex-wrap屬性,我們可以將元素包裝到多行。但是,預設情況下,行中的所有元素往往與該行中最高的元素具有相同的高度。如果我們希望元素保持其自然高度,這可能是不可取的。

範例:

考慮以下程式碼:

#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex: 1 auto;
}
登入後複製

答案:

答案:
#container {
 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
登入後複製

Fbox 繼承自box設計行的行為如上所述。 Flexbox 並不打算模仿 Masonry 風格的佈局,其中行元素可以擴展到相鄰行的空間。使用align-items調整元素高度的選項有限:作為替代方案,請考慮使用列方向或探索多列模組以獲得更多自訂選項。

以上是如何讓 Flexbox 兒童利用可用空間來劃分不同的高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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