點燈坊

失くすものさえない今が強くなるチャンスよ

Flexbox 使用 justify-content space-around 令 Column 間隔相等

Sam Xiao's Avatar 2021-06-25

若希望 Browser 能自動均分 section 剩餘寬度,可使用 justify-contentspace 系列設定。

Version

CSS 3

justify-content space-around

around000

Item 之間的間隔相等,2 看起來水平置中,且 1 左側與 3 右側間隔只有其他間隔一半。

<template lang='pug'>
section
  div 1
  div 2
  div 3
</template>

<style lang='stylus' scoped>
section
  display flex
  flex-direction row
  justify-content space-around
  width 100%
  height 500px

div
  width 50px
  height 50px
  margin 10px
</style>

第 9 行

section
  display flex
  flex-direction row
  justify-content space-around
  width 100%
  height 500px

設定 section style:

  • display flex:設定子層使用 Flexbox
  • flex-direction row:表示水平由左至右,main axis 為 row,這也是 Flexbox 預設值
  • justify-content space-around:item 之間的間隔平分 section 剩餘寬度,但第一個 item 與最後一個 item 的左右側間隔為其他間隔的一半
  • width 100%:設定 section 寬度
  • height 500px:設定 section 高度

16 行

div
  width 50px
  height 50px
  margin 10px

設定 div style:

  • width 50px:設定 div 寬度
  • height 50px:設定 div 高度
  • margin 10px:設定 div margin

Conclusion

  • 實務上 space-betweenspace-evenly 較常使用,可平分 section 剩餘寬度

Reference

MDN, justify-content