如何使 Flexbox 專案根據其原始大小按比例展開?
Dec 22, 2024 am 03:04 AM使 Flex-Grow 項目依照原始大小展開
使用 Flexbox 設定元素樣式時,最好將容器中的剩餘空間分配給項目。但是,預設情況下,flex-grow 會為所有項目分配相同的寬度,無論其初始大小如何。要保留這種差異,請考慮將 flex-grow 設定為“auto”而不是“1”。
說明
Flex-grow 以兩個參數為基礎進行操作:可用可用空間和 flex-basis。可用空間是指容器中可以在彈性項目之間分配的剩餘空間。 Flex-basis 決定分配前每個項目的初始大小。
絕對大小(flex: 1):
- 當 flex-basis 設定為 0 時,flex-grow 將整個可用空間視為可用空間。
- 這會導致所有大小按比例相等項目,無論其原始內容為何。
相對大小(flex: auto):
- 當flex-basis 為auto(預設)時,flex-grow 會考慮每個項目的內容大小。
- 然後僅按比例分配容器中的剩餘空間是基於 flex-grow 值。
範例:
考慮三個不同寬度的按鈕。我們希望它們填充容器的剩餘寬度,每個按鈕都保持其比例大小。
.row-flex { width: 100%; display: flex; flex-direction: row; } .button { flex: auto; // Relative sizing to maintain original proportions display: inline-block; padding: 10px; color: #fff; text-align: center; }
登入後複製
透過將 flex-grow 設為 auto,按鈕將從目前大小按比例擴展,填充可用空間,同時保留它們最初的大小差異。
以上是如何使 Flexbox 專案根據其原始大小按比例展開?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)