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
one 😎
two 🍕

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
one 😎
two 🍕

設定為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/3
1200px=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
one 😎
two 🍕

基於上述算式,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
one 😎
two 🍕

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

總結

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

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