點燈坊

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

使用 align-items 在有換列下處理 Cross Axis 對齊

Sam Xiao's Avatar 2021-02-23

align-items 在沒有換列時比較看不出其意義,在換列下可明確感受其本質。

Version

CSS 3

flex-start

wrap001

當 Flexbox 換列時,紅色部分為其內部 flex line,align-items: flex-start 會根據 flex line 的 cross axis 起始處 對齊,因此看起來像 垂直靠上

<template>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  height: 500px;
}

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}
</style>

12 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  height: 500px;
}

設定 box style:

  • display: flex:使用 Flexbox
  • flex-wrap: wrap:當各 item 總 width 超越 box width 時自動換列
  • align-items: flex-start:各 item 在 flex line 的 cross axis 從 起始處 對齊,看起來像 垂直靠上
  • width: 100%:設定 box 的 width
  • height: 500px:設定 box 的 height

20 行

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}

設定各 item style:

  • width: 250px:設定各 item 的 width
  • height: 200px:設定各 item 的 height
  • margin: 10px:設定各 item 的 margin

flex-end

wrap002

當 Flexbox 換列時,紅色部分為其內部 flex line,align-items: flex-end 會根據 flex line 的 cross axis 結束處 對齊,因此看起來像 垂直靠下

<template>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
  height: 500px;
}

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}
</style>

12 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
  height: 500px;
}

設定 box style:

  • display: flex:使用 Flexbox
  • flex-wrap: wrap:當各 item 總 width 超越 box width 時自動換列
  • align-items: flex-end:各 item 在 flex line 的 cross axis 從 結束處 對齊,看起來像 垂直靠下
  • width: 100%:設定 box 的 width
  • height: 500px:設定 box 的 height

20 行

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}

設定各 item style:

  • width: 250px:設定各 item 的 width
  • height: 200px:設定各 item 的 height
  • margin: 10px:設定各 item 的 margin

center

wrap000

當 Flexbox 換列時,紅色部分為其內部 flex line,align-items: center 會根據 flex line 的 cross axis 置中,因此看起來像 垂直置中

<template>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 500px;
}

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}
</style>

12 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 500px;
}

設定 box style:

  • display: flex:使用 Flexbox
  • flex-wrap: wrap:當各 item 總 width 超越 box width 時自動換列
  • align-items: center:各 item 在 flex line 的 cross axis 置中,看起來像 垂直置中
  • width: 100%:設定 box 的 width
  • height: 500px:設定 box 的 height

20 行

.item {
  width: 250px;
  height: 200px;
  margin: 10px;
}

設定各 item style:

  • width: 250px:設定各 item 的 width
  • height: 200px:設定各 item 的 height
  • margin: 10px:設定各 item 的 margin

stretch

wrap003

當 Flexbox 換列時,紅色部分為其內部 flex line,若 item 並沒有設定 height,align-items: stretch 會將 item height 自動 stretch 成 flex line 的 height。

<template>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  height: 500px;
}

.item {
  width: 250px;
  margin: 10px;
}
</style>

12 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  height: 500px;
}

設定 box style:

  • display: flex:使用 Flexbox
  • flex-wrap: wrap:當各 item 總 width 超越 box width 時自動換列
  • align-items: stretch:各 item 的 height 會 stretch 成 flex line 的 height,這也是 align-items 的預設值
  • width: 100%:設定 box 的 width
  • height: 500px:設定 box 的 height

20 行

.item {
  width: 250px;
  margin: 10px;
}
  • width: 250px:設定各 item 的 width
  • margin: 10px:設定各 item 的 margin

故意沒設定 item 的 height,將由 align-items: stretch 決定 height

baseline

wrap004

  • Baseline 與 flex-start 表現很類似,只有在 padding 不同時才有差異
  • 注意其是與 content 在 cross axis 靠上對齊,而非與 item 在 cross axis 靠上對齊
<template>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: 100%;
  height: 500px;
}

.item {
  width: 250px;
  margin: 10px;
}

.item1 {
  padding-top: 3px;
  height: 100px;
}

.item2 {
  padding-top: 6px;
  height: 200px;
}

.item3 {
  padding-top: 10px;
  height: 50px;
}

.item4 {
  padding-top: 3px;
  height: 200px;
}

.item5 {
  padding-top: 6px;
  height: 100px;
}
</style>

12 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: 100%;
  height: 500px;
}

設定 box style:

  • display: flex:使用 Flexbox
  • flex-wrap: wrap:當各 item 總 width 超越 box width 時自動換列
  • align-items: baseline:各 item 的 content 在 flex line 的 cross axis 從 起始處 對齊,看起來與 flex-start 很類似
  • width: 100%:設定 box 的 width
  • height: 500px:設定 box 的 height

20 行

.item {
  width: 250px;
  margin: 10px;
}

設定各 item 的共用 style:

  • width: 250px:設定各 item 的 width
  • margin: 10px:設定各 item 的 margin

25 行

.item1 {
  padding-top: 3px;
  height: 100px;
}

.item2 {
  padding-top: 6px;
  height: 200px;
}

各 item 的 padding-topheight 都不一樣,故意展示 baseline 特性

Conclusion

  • align-items 在沒有換列時,其 flex line 只有一列,且 height 剛好等於 box height,因此看不出 flex line 概念;但若牽涉換列時,就可明顯看出 flex-startflex-endcenter 是根據 flex line 的 cross axis 對齊

Reference

MDN, align-items