css屬性為 flex 1 時表示的意思

2021-10-10 18:30:16 字數 1113 閱讀 5197

flex屬性是 flex-grow + flex-shrink + flex-basis 的縮寫

.item 

// 等價於

.item

.item 

//等價於

.item

.item 

// 等價於

.item

// 該數字為 flex-grow 值,而flex-shrink 的值取 1,flex-basis 取 0%:

.item

// 等價於

.item

// 將長度或百分比設為 flex-basis 值,而flex-grow 取 1,flex-shrink 取 1

.item1

// 等價於

.item1

// -----------------

.item2

// 等價於

.item2

​// 將兩個數字分別設為 flex-grow 和 flex-shrink 的值,而flex-basis 取 0%

.item

// 等價於

.item

​​// 將非負數字和 長度或百分比 分別設為 flex-grow 和 flex-basis 的值,flex-shrink 取 1

.item

// 等價於

.item

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

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

0% 即 0 寬度

auto 對應取主尺寸即 100px

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

item-3 分配 1/5,得 60px

各專案最終寬度為:

文章目錄

專案設定屬性為 flex 1 時表示的意思

flex屬性是flex grow flex shrink flex basis的縮寫。item 等價於 item.item 等價於 item.item 等價於 item 該數字為 flex grow 值,而flex shrink 的值取 1,flex basis 取 0 item 等價於 item ...

專案設定屬性為 flex 1 時表示的意思

flex屬性是 flex grow flex shrink flex basis 的縮寫。1.賦給3個值 item 等價於 item 2.賦值為auto item 等價於 item 3.賦值為none item 等價於 item 4.賦值為非負數 該數字為 flex grow 值,而flex shr...

flex布局布局之flex 1屬性詳解

採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...