首先明確一點是, flex 是 flex-grow、flex-shrink、flex-basis的縮寫。故其取值可以考慮以下情況:
flex 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值,則 flex 的預設值是 0 1 auto。同理,如下是等同的:
.item
.item
當 flex 取值為 none,則計算值為 0 0 auto,如下是等同的:
.item
.item
當 flex 取值為 auto,則計算值為 1 1 auto,如下是等同的:
.item
.item
當 flex 取值為乙個非負數字,則該數字為 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
.item
.item
當 flex 取值為乙個長度或百分比,則視為 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情況(注意 0% 是乙個百分比而不是乙個非負數字):
.item-1
.item-1
.item-2
.item-1
當 flex 取值為兩個非負數字,則分別視為 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,如下是等同的:
.item
.item
當 flex 取值為乙個非負數字和乙個長度或百分比,則分別視為 flex-grow 和 flex-basis 的值,flex-shrink 取 1,如下是等同的:
.item
.item
flex-basis 規定的是子元素的基準值。所以是否溢位的計算與此屬性息息相關。flex-basis 規定的範圍取決於 box-sizing。這裡主要討論以下 flex-basis 的取值情況:
auto:首先檢索該子元素的主尺寸,如果主尺寸不為 auto,則使用值採取主尺寸之值;如果也是 auto,則使用值為 content。
content:指根據該子元素的內容自動布局。有的使用者**沒有實現取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比:根據其包含塊(即伸縮父容器)的主尺寸計算。如果包含塊的主尺寸未定義(即父容器的主尺寸取決於子元素),則計算結果和設為 auto 一樣。
舉乙個不同的值之間的區別:
主軸上父容器總尺寸為 600px
子元素的總基準值是:0% + auto + 200px = 300px,其中
伸縮放大係數之和為: 2 + 2 + 1 = 5
剩餘空間分配如下:
而 item-2 基準值取 auto 的時候,根據規則基準值使用值是主尺寸值即 100px,故這 100px 不會納入剩餘空間
HashMap的負載因子為什麼不設定成1
為什麼hashmap的負載因子設定成0.75,而不是1也不是0.5?這背後到底有什麼考慮?在hashmap原始碼中 hashmap預設容量大小是16,最大容量是2的30次方,預設的負載因子是0.75f static final int default initial capacity 1 4 aka...
在網上整理的關於開啟相機和相簿並設定成頭像的問題
首先 加許可權 android name android.permission.write settings android name android.permission.mount unmount filesystems android name android.permission.write...
專案1 成員函式,有員函式和一般函式的區別(1)
all right reserved.檔名稱 test.cpp 作 者 韓雙志 完成日期 2016年4月10日 版本號 v1.0 include using namespace std class time void display1 friend void display2 time int ge...