flex#9 flex

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
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

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
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

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
one 😎
two 🍕
three 🍟
four 👍
five 👀
six 💩

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *