Flexbox 使用 justify-content flex-start 水平靠左 | 點燈坊

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

Version

CSS 3

Column Left

子層 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

子層 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