次世代 Hugo

無駄を削ぎ、本質を研ぐ

Flexbox 使用 justify-content flex-end 水平靠右

Sam Xiao's Avatar 2021-06-23

若希望能對 Main Axis 方向靠右，可使用 justify-content flex-end 設定。

Version

CSS 3

Column Right

end000

子層 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 flex-end
  width 100%
  height 97vh

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

第 9 行

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

設定 section style：

  • display flex：設定子層 item 使用 Flexbox
  • flex-direction row：表示水平由左至右，main axis 為 row，這也是 Flexbox 預設值
  • justify-content flex-end：因為由右至左，所以 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 Right

end001

子層 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 flex-end
  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 flex-end
  width 50px
  height 50px
  margin 10px

設定 div style：

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

Conclusion

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

Reference

MDN, justify-content

# CSS