flex設定成1和auto有什麼區別

2021-10-07 07:23:05 字數 1385 閱讀 7538

首先明確一點是, 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...