注意事項

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

2
🙂

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

2
🙂

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

2
🙂

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

2
🙂

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

2
🙂

補充：讓「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

2
🙂