專案設定屬性為 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-shrink 的值取 1，flex-basis 取 0%：

.item

// 等價於

.item

5.賦值為乙個長度或百分比

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

.item1

// 等價於

.item1

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

.item2

// 等價於

.item2

6.賦值為兩個非負數

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

.item

// 等價於

.item

7.賦值為乙個非負數和乙個長度或百分比

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

.item

// 等價於

.item

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

auto：首先檢索該子元素的主尺寸，如果主尺寸不為 auto，則使用值採取主尺寸之值；如果也是 auto，則使用值為 content。

content：指根據該子元素的內容自動布局。有的使用者**沒有實現取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。

百分比：根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決於子元素），則計算結果和設為 auto 一樣。

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

專案設定屬性為 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 專案屬性 flex 布局示例

flex屬性 flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值 auto 1 1 auto 和 none 0 0 auto 下面來看看使用專案屬性flex的兩個示例 一 css 1 html 1 bod...

Flexbox學習筆記 flex專案屬性

flexbox是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。flex屬性是用於設定彈性盒子的子元素如何分配空間。flex 屬性是 flex grow flex sh...