flex:0 1 auto是什麼
flex是flex-grow,flex-shrink,flex-basis3個屬性結合在一起的縮寫形式,後兩個屬性可選寫
flex-grow
表示當子元素的空間小於父元素的空間時,如何處理剩餘空間,
預設值為0表示不占有剩餘空間;
當子元素都設定為1時表示平均分配剩餘空間;
當乙個子元素為2其餘子元素為1時為2的子元素佔據的剩餘空間比其他子元素多一倍;
當乙個子元素為1其餘子元素為0,為1的子元素佔據全域性剩餘空間
felx-shrink
表示當子元素的空間大於父元素的空間時,如何縮小子元素,預設值為1當所有子元素都設定為1時所有子元素都會等比例縮小,當乙個子元素為0其餘子元素為1是表示為0的子元素不縮小,其餘元素縮小
flex-basis
用於設定專案佔據的主軸空間,設定為auto表示專案佔據的主軸大小等於專案的實際內容大小,設定為固定值表示專案佔據的主軸大小等於固定值
其 語法格式 有 單值、雙值、三值 三種語法格式。
單值語法
值必須是如下之一:
數值 number ,那麼解釋為 flex: number 1 0
none 、 auto 、 initial
雙值語法
第乙個值必須是 number ,它會被解釋為 flex-grow 屬性,第二個值必須是如下之一:
數值 number ,會被解釋為 flex-shrink 屬性
乙個能夠描述 寬度 的值,例如 10em 、 30% 、 min-content ,會被解釋為 flex-basis 屬性
三值語法
三個值的含義:
第乙個 number 表示 flex-grow
第二個 number 表示 flex-shrink
第三個描述寬度的值表示 flex-basis
flex 各屬性含義介紹
flex-grow
這個屬性設定的是當前 flex 元素在 main-size 中的伸縮係數, main-size 指的是寬度和高度(由 flex-direction 屬性控制),這個屬性的預設值是 0 。
flex 值越大,代表所佔的空間越大。如下圖所示, a 、 b 、 c 、 f 這幾個元素設定的 flex 值為 1 ,而 d 、 e 元素設定的 flex 值為 2 ,所以 d 和 e 元素所佔的比例就是其它幾個的兩倍。
flex-shrink
flex-shrink 屬性設定的是 flex 元素的收縮係數。假設所有元素加起來的大小超出了 flex容器,那麼就需要用 flex-shrink 這個屬性來控制如何收縮。它的預設值是 1 。
如下圖所示, a 、 b 、 c 、 d 、 e 這幾個元素的大小超出了容器大小本身, a 、 b 、c 設定的 flex-shrink 屬性的值為 1 , d 和 e 屬性設定的值是 2 ,那麼 d 和 e 這兩個元素的大小會更小一點,這兩個收縮的會 更厲害 一點。
flex-basis
這個屬性設定的是乙個 flex 元素的 初始大小 。它可以用以下幾種值填充:
(1)寬度
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
auto 是 flex-basis 的預設值
(2)內建調節大小的關鍵字
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
(3)根據內容自動調節大小
flex-basis: content;
(4)全域性值
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
flex 屬性常用值
flex: 0 auto
flex: 0 auto 等同於 flex: initial ,也是 flex: 0 1 auto 的簡寫表達。它根據元素自身的width 或 height 屬性來調節元素大小。
當還剩餘一些空閒空間時,它使 flex 元素呈現的是固定大小的樣式;當沒有足夠的空間時,它允許它收縮到最小。 auto 邊距可用於根據主軸來對齊元素。
flex: auto
flex: auto 等同於 flex: 1 1 auto ,它根據元素的 width 或 height 屬性調整元素的大小,但是其非常靈活,以便讓它們吸收沿主軸的任何額外空間。
flex: none
flex: none 等同於 flex: 0 0 auto 。它根據 width 和 `height 來調節元素大小,但是完全不靈活。
C 面試題之程式設計其他問題面試題
程式設計其他問題面試題.cpp main主函式執行完畢後,是否可能會再執行一段 給出說明。美國某著名網路開發公司2005年面試題 答案 如果需要加入一段在main退出後執行的 可以使用atexit 函式註冊乙個函式,如下 include int atexit void funtion void in...
C 面試題之i 面試題
i 面試題1.cpp 中國台灣某著名防毒軟體公司2005年10月面試題 int i 3,j 4 i?i j printf d d n i,j a.3 3 b.4 4 c.3 4 d.4 3 答案b i 面試題2.cpp 中國某著名計算機金融軟公司2005年面試題 int x 1,j 2 int k ...
C 面試題之sizeof面試題
sizeof面試題1.cpp what is the output of the following code?美國某著名計算機軟硬體公司面試題 include include include using namespace std structa structb int main 解析 ss1是乙...