重新認識flex縮寫屬性 flex

2021-09-11 13:06:56 字數 1577 閱讀 7033

flex是flex-grow,flex-shrink,flex-basis三個屬性值的縮寫,所以我也曾以為只是單純縮寫而已,沒什麼複雜的,直到看了flex:1能實現各子元素均分外層容器空間的效果:圖1

html和css**如下:

"container">

"inner">我是左側的item

"inner">我是右側的item,我的內容比較多

.container

.inner

複製**

按照我最初的理解,flex:1相當於設定了flex-grow:1,flex-shrink:1(預設值),flex-basis:auto(預設值),而如果對元素這樣設定三個屬性值的話,效果如下圖2所示,明顯是水平均分的,因為flex-grow為1只是表示均分多餘的空間圖2

那麼問題來了,flex:1並不等價於flex-grow:1,flex-shrink:1(預設值),flex-basis:auto啊,說好的縮寫呢?

flex是flex-grow,flex-shrink和flex-basis的縮寫,flex屬性值可以只指定乙個屬性的值,而另外的屬性值採用各自在flex屬性中的的初始值,但是有一點要注意的是:flex屬性中flex-grow和flex-basis的初始值和它們原始的預設值不同,至於為什麼不同,mdn中有明確的說過這樣的設計是為了讓「flex」縮寫在最常見的情景下比較好用。

flex-grow用於設定各item項按對應比例劃分剩餘空間,若flex中沒有指定flex-grow,則相當於設定了flex-grow:1

flex-shrink用於設定item的總和超出容器空間時,各item的收縮比例,若flex中沒有指定flex-shrink,則等同於設定了flex-shrink:1

flex-basis用於設定各item項的伸縮基準值,可以取值為長度或百分比,如果flex中省略了該屬性,則相當於設定了flex-basis:0.

flex的值的完整寫法是,不過它的取值還有可能是單個數字或者單個百分比等,不同種類的取值所表示的意思是大有不同的。

當flex為none時,等同於flex: 0 0 auto;

當flex為auto時,等同於flex: 1 1 auto;

當flex取值為乙個數字,則該數字是設定的flex-grow值,其它兩個屬性用初始值,如flex:1時,等同於flex: 1 1 0%

當flex取值為2個數字時,相當於設定的flex-grow和flex-shrink值,flex-basis取值為初始值,如flex:1 0時,等同於flex: 1 0 0%

當flex取值為1個數字和1個長度或百分比時,設定的是flex-grow和flex-basis的值,flex-shrink值時初始值,如flex:1 20%,等同於flex: 1 1 20%

原來乙個簡單的縮寫屬性flex是有這麼多花樣的~那麼我不想背它的初始值,不同值對應的縮放屬性等等,有這麼多原因,以後是不是不用flex就可以了,光明正大用flex-grow,flex-shrink,flex-basis就好了?當然是可以了~不過用flex至少還是有它的好處的,比如說看上去簡潔(乙個flex屬效能有這麼多不同效果進而顯得高大上),還有重要的一點,同樣的乙個單詞能完成三個單詞的工作,能使**少啊:)

重新認識container

我還清楚的記得,第一次從 那兒聽說container這個詞 結果他給我解釋了半天還是似懂非懂的。今天,偷閒翻了下posa4,發現裡面對container的解釋特別清楚。粗略的理解下來是,為了分離關注點,而實現的對系統資源的封裝。豁然開朗的發現,os就是應用程式的container。突發奇想的,開發乙...

重新認識測試

以前總覺得測試是軟體開發的邊緣職位,開發人員才是軟體生命週期的核心人員。隨著對網際網路公司的了解,逐步了解到測試的重要性。以bat為例,三家公司均設定了測試開發工程師崗位,該崗位的主要職責就是編寫自動化測試案例,通過對 的邏輯進行分析,設計出能夠覆蓋大部分 的測試用例。如阿里的測試開發工程師的崗位描...

重新認識ARC

雖然用了很久的arc,感受了 簡潔。但是對arc底層實現並不了解。今天抽空研究了下,做些簡單地總結。一 strong 1.區域性變數 對於區域性變數來說,在超出作用域的地方由編譯器自動插入release。大概轉化為 在非arc返回的autorelease型別的方法 在blog手碼大概 如有錯誤還望指...