點燈坊

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

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

Sam Xiao's Avatar 2021-06-26

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

Version

CSS 3

justify-content space-evenly

evenly000

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-evenly
  width 100%
  height 500px

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

第 9 行

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

設定 section style：

  • display flex：設定子層使用 Flexbox
  • flex-direction row：表示水平由左至右，main axis 為 row，這也是 Flexbox 預設值
  • justify-content space-evenly：item 之間的間隔平分 section 剩餘寬度，且第一個 item 與最後一個 item 的左右側間隔也與其他間隔相等

16 行

div
  width 50px
  height 50px
  margin 10px

設定 div style：

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

Conclusion

  • 實務上 space-between 與 space-evenly 較常使用，可平分 section 剩餘寬度

Reference

MDN, justify-content

# CSS