flex#10 flex-basis, flex-grow, flex-shrink

解説

flexg屬性可以在拆分成以下3項

• flex-basis：當flex item沒變形時，他的初始預設寬度（或是高度，當在cross-axis時）
• flex-grow：當容器有多餘空間時，分配給flex item的空間比例
• flex-shrink：當容器空間不足時，flex item犧牲體積的比例

.container
 .box.box1 one 😎
 .box.box2 two 🍕

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px

flex-basis

當flex item沒變形時，他的初始預設寬度（或是高度，當在cross-axis時）

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px

設定為flex-basis: 400px後，每個item的寬度都變成400px了

flex-grow

套用以下設定

• box1→flex-grow: 1
• box2→flex-grow: 2

解説：假定容器寬度為1200px
在flex-basis的設定之下，box1、box2各寬400px
1200-400*2=300px，餘下的寬度為300px

flex-grow總數為1+2=3
300px/3=100px
因此

box1的寬度變為400px+100px=500px
box2的寬度變為400px+200px=600px

【注意】由於flex屬性同時包含了flex-grow / shrink
所以如果今天設定是

• box1→flex: 1
• box2→flex: 2

box1寬度會等於1/31200px=400px
box2寬度會等於2/31200px=800px

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px

.box1
 flex-grow: 1
.box2
 flex-grow: 2

基於上述算式，box2只比box1大一點點而已。
並且，由於沒有指定flex-shrink
當容器寬度小於2者的flex-basis加總時（例：容器為700px），
2個flex-item會變成一樣大。

flex-shrink

flex-shrink只會在容器空間不夠時有作用
容器空間過多時不會起作用
（flex-grow的相反）

計算方式也是grow的相反

• box1→flex-shrink: 1
• box2→flex-shrink: 2

解説：假定容器寬度為500px
在flex-basis的設定之下，box1、box2各寬400px
500-400*2=-400px，不足400px

flex-grow總數為1+2=3
300px/3=100px
因此

box1的寬度變為400px-100px=300px
box2的寬度變為400px-200px=200px

.box1
 background: #1abc9c
.box2
 background: #3498db

.container
 display: flex
 border: 10px solid mistyrose
 
.box
 color: white
 text-align: center
 text-shadow: 4px 4px 0 rgba(0,0,0,0.1)
 padding: 10px
 flex-basis: 400px

.box1
 flex-shrink: 1
.box2
 flex-shrink: 2

在寬度足夠時看會沒差，需要把螢幕條小在看。
條小後，會看到box2比box1大一點點

總結

flex屬性集合了flex-grow, flex-shrink, flex-basis三種屬性
當我們使用flex: 1時，其實代表的是flex: 1 1 auto

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto