CSS 由 flex 1 引發的思考

2021-08-14 11:20:21 字數 2239 閱讀 4683

首先明確一點是， flex 是flex-grow、flex-shrink、flex-basis的縮寫。

flex-grow 屬性：定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

flex-shrink 屬性：定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

flex-basis 屬性：定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

當 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 的預設值是以上三個屬性值的組合。假設以上三個屬性同樣取預設值，則 flex 的預設值是 0 1 auto。同理，如下是等同的：

.item


.item
flex-basis 規定的是子元素的基準值。所以是否溢位的計算與此屬性息息相關。flex-basis 規定的範圍取決於 box-sizing。這裡主要討論以下 flex-basis 的取值情況：

舉乙個不同的值之間的區別：

class="parent">


class="item-1">


div>


class="item-2">


div>


class="item-3">


div>


div>


type="text/css">


.parent


.parent > div


.item-1


.item-2


.item-3


style>
主軸上父容器總尺寸為 600px

子元素的總基準值是：0% + auto + 200px = 300px，其中

0% 即 0 寬度


auto 對應取主尺寸即 100px
故剩餘空間為 600px - 300px = 300px

伸縮放大係數之和為： 2 + 2 + 1 = 5

剩餘空間分配如下：

item-1 和 item-2 各分配 2/5，各得 120px


item-3 分配 1/5，得 60px
各專案最終寬度為：

item-1 = 0% + 120px = 120px


item-2 = auto + 120px = 220px


item-3 = 200px + 60px = 260px
當 item-1 基準值取 0% 的時候，是把該專案視為零尺寸的，故即便宣告其尺寸為 140px，也並沒有什麼用，形同虛設

而 item-2 基準值取 auto 的時候，根據規則基準值使用值是主尺寸值即 100px，故這 100px 不會納入剩餘空間

參考資料：

由使用tag 0 引發的問題

如果我們用了乙個父view，上面放了多個子view,每個子view都通過從0開始的tag值來進行標誌，以便於後期在像view上直接使用viewwithtag tag值來取各個子view 而在用 父view viewwithtag 0 取到的view,發現不是子view,而是這個父view,查詢資料發...

關於C語言除0引發的思考

複製 如下 進行浮點數程式設計時，如果沒有注意，常常會出現輸出類似 1.ind,1.inf 或者 nan,www.cppcns.com inf 之類奇怪的輸出。這通常隱含了浮點數操作的異常。進行整數除0的時候，程式會檢查出乙個錯誤，比如對於這個 複製 如下 include include int m...

由ESP8266引發的Cygwin安裝不完全指北

疫情在家無聊，沒有實驗室感覺手裡空空的，在小破站看到各種esp8266奇淫技巧，覺得甚是有趣，激發了我的折騰天性，遂開啟了某寶。然而又因縮家裡好幾個月，實在囊中羞澀，只好鎖定了乙個12塊錢包郵的裸機版，大眾長相 收到包裹後，插上資料線，便開始了原以為會很順利的折騰史 arduinoide emmm怎...