點燈坊

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

使用 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-top 與 height 都不一樣，故意展示 baseline 特性

Conclusion

  • 當 align-items 在沒有換列時，其 flex line 只有一列，且 height 剛好等於 box height，因此看不出 flex line 概念；但若牽涉換列時，就可明顯看出 flex-start、flex-end 與 center 是根據 flex line 的 cross axis 對齊

Reference

MDN, align-items

# CSS