flex#7 align-content

注意事項

  • flex-wrap需要為wrap
  • 只考慮與cross-axis的關係

範例

align-content: stretch (default)

效果:填滿cross-axis

.container
 .box.box1 1
 .box.box2 
  |2
  br
  |:)
 .box.box3 3
 .box.box4 4
 .box.box5 5
 .box.box6 6
 .box.box7 7
 .box.box8 8
 .box.box9 9
 .box.box10 10
.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: stretch
1
2
🙂
3
4
5
6
7
8
9
10

align-content: flex-start

集中於上方

.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: flex-start
1
2
🙂
3
4
5
6
7
8
9
10

align-content: flex-end

集中於下方

.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: flex-end
1
2
🙂
3
4
5
6
7
8
9
10

align-content: space-between

平均分散

.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: space-between
1
2
🙂
3
4
5
6
7
8
9
10

align-content: center

集中於中間

.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: center
1
2
🙂
3
4
5
6
7
8
9
10

補充:讓「10」也可以水平置中

使用justify-content: center

.box
  color: white
  text-align: center
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1)
  padding: 10px
  width: 30%

.container
  display: flex
  border: 10px solid mistyrose
  height: 100vh
  flex-wrap: wrap
  align-content: center
  justify-content: center
1
2
🙂
3
4
5
6
7
8
9
10

發佈留言

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