flex屬性

flex屬性，指定在flex item上面。描述當flex container有剩餘空間（或不夠的空間）時要如何分配
flex屬性僅代表等分比例原則，不是px也不是%

• flex: 1→1份
• flex: 2→2份（flex1的二倍）
• flex: 3→3份（flex1的三倍）

未指定flex屬性時

.container
 .box.box1 one 😎
 .box.box2 two 🍕
 .box.box3 three 🍟
 .box.box4 four 👍
 .box.box5 five 👀
 .box.box6 six 💩

.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.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容器有剩餘空間，flex item沒有填滿剩餘空間

flex: 1

若指定所有flex item為1，則會

• flex item會填補容器的空白
• 所有flex item寬度變一樣

.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.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: 1

flex item填滿容器，並且均等長

flex進階指定

套用以下指定

• box1→flex: 1
• box2→flex: 2
• box3→flex: 1
• box4→flex: 1
• box5→flex: 3
• box5→flex: 3

.box1
 background: #1abc9c
.box2
 background: #3498db
.box3
 background: #9b59b6
.box4
 background: #34495e
.box5
 background: #f1c40f
.box6
 background: #e67e22
.box7
 background: #e74c3c
.box8
 background: #bdc3c7
.box9
 background: #2ecc71
.box10
 background: #16a085
 
.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: 1

.box2
 flex: 2

.box5
 flex: 3

box1為1等分　∴寬度為1/9
box2為2等分　∴寬度為2/9
box3為1等分　∴寬度為1/9
box4為1等分　∴寬度為1/9
box5為3等分　∴寬度為3/9
box6為1等分　∴寬度為1/9

總長為1+2+1+1+3+1=9