點燈坊

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

Flexbox 使用 justify-content center 水平置中

Sam Xiao's Avatar 2021-06-23

若希望能對 Main Axis 方向置中，可使用 justify-content center 設定。

Version

CSS 3

Column Center

center000

子層 item 水平置中，且內容 123 從左開始。

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

<style lang='stylus' scoped>
section
  display flex
  flex-direction row
  justify-content center
  width 100%
  height 97vh

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

第 9 行

section
  display flex
  flex-direction row
  justify-content center
  width 100%
  height 97vh

設定 section style：

  • display flex：設定子層 item 使用 Flexbox
  • flex-direction row：表示水平由左至右，main axis 為 row，這也是 Flexbox 預設值
  • justify-content center：表示 item 是水平置中
  • width 100%：設定 section 寬度
  • height 97vh：設定 section 高度

16 行

div
  width 50px
  height 50px
  margin 10px

設定 div style：

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

Content Center

center001

子層 item 水平靠左，且內容 123 水平置中。

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

<style lang='stylus' scoped>
section
  display flex
  flex-direction row
  width 100%
  height 97vh

div
  display flex
  justify-content center
  width 50px
  height 50px
  margin 10px
</style>

第 9 行

section
  display flex
  flex-direction row
  width 100%
  height 97vh

設定 section style：

  • display flex：設定子層 item 使用 Flexbox
  • flex-direction row：表示水平由左至右，main axis 為 row，這也是 Flexbox 預設值
  • width 100%：設定 section 寬度
  • height 97vh：設定 section 高度

15 行

div
  display flex
  justify-content center
  width 50px
  height 50px
  margin 10px

設定 div style：

  • display flex：在每個 div 再度使用 Flexbox
  • justify-content center：讓 div 內 content 水平置中
  • width 50px：設定 div 寬度
  • height 50px：設定 div 高度
  • margin 10px：設定 div margin

Conclusion

  • 若 flex-direction 設定為 column，則 main axis 為 column，justify-content 則對 column 方向對齊
  • justify-content center 有兩種用途：若用在父層則是將所有 column 水平置中；若用在子層則是將 content 水平置中

Reference

MDN, justify-content

# CSS