點燈坊

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

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