面試題之flex問題

2021-10-07 06:07:18 字數 2600 閱讀 8327

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是乙...