次世代 Hugo

無駄を削ぎ、本質を研ぐ

Flexbox 使用 justify-content flex-start 水平靠左

Sam Xiao's Avatar 2021-06-23

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

Version

CSS 3

Column Left

start000

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

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

第 9 行

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

設定 section style：

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

start001

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

設定 div style：

  • display flex：在每個 div 再度使用 Flexbox
  • justify-content flex-start：讓 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-start 有兩種用途：若用在父層則是將所有 column 水平靠左；若用在子層則是將 content 水平靠左

Reference

MDN, justify-content

# CSS