點燈坊

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

如何垂直靠上 ?

Sam Xiao's Avatar 2021-04-07

垂直靠上為實務上常見需求，CSS 可由多種方式實現。

Version

CSS 3

margin: auto

top000

CSS 垂直靠上，在子層 item 使用 margin: auto 實現。

<template>
  <div class="box">
    <div class="item">
      CSS
    </div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  height: 100vh;
}

.item {
  margin-bottom: auto;
}
</style>

第 2 行

<div class="box">
  <div class="item">
    CSS
  </div>
</div>

由於 margin: auto 要使用在子層 item，因此需要兩層 HTML。

第 10 行

.box {
  display: flex;
  height: 100vh;
}

設定父層 box style：

  • display: flex：使用 Flexbox 收縮 <div> 高度
  • height: 100vh：設定父層 box 高度

15 行

.item {
  margin-bottom: auto;
}

設定子層 item style：

  • margin-bottom: auto：由於父層 box 有設定高度，因此可自動調整 bottom margin 而垂直靠上

Flexbox

justify-content: flex-start

top001

Flexbox 亦有多種方式可垂直靠上，先討論從父層 box 處理。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
}
</style>

第 8 行

.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
}

設定父層 box style：

  • display: flex：子層 item 使用 Flexbox 排列
  • flex-direction: column：設定 main axis 為 column，也因為 main axis 為 column，本來 Flexbox 會使 <div> 寬度由 content 決定，高度撐滿 100vh，現在改成高度由 content 決定，寬度撐滿一整列
  • justify-content: flex-start：直接將 <div> 靠上於 main axis，因為目前 main axis 為 column，相當於垂直靠上
  • height: 100vh：設定 box 高度

justify-content: flex-end

top002

CSS 垂直靠上，一樣使用 justify-content 系列。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  height: 100vh;
}
</style>

第 8 行

.box {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  height: 100vh;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox 排列
  • flex-direction: column-reverse ： main axis 為 column，但改從下往上排列
  • justify-content: flex-end： 因為由下往上排列，flex-end 相當於垂直靠上

實務上不會使用這種方式，只是展示亦可使用 justify-content: flex-end 達成垂直靠上

align-items: start

top003

CSS 垂直靠上，改用 align-items 系列。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  align-items: start;
  height: 100vh;
}
</style>

第 8 行

.box {
  display: flex;
  align-items: start;
  height: 100vh;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox 排列
  • align-items: start：由於沒更改 flex-direction，因此目前 main axis 仍是 column，可使用 align-items: start 直接靠上於 cross axis，相當於垂直靠上
  • height: 100vh：設定 box 高度

flex-grow: 1

top000

CSS 垂直靠上，但在子層 item 處理。

<template>
  <div class="box">
    <div>CSS</div>
    <div class="empty"/>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.empty {
  flex-grow: 1;
}
</style>

第 2 行

<div class="box">
  <div>CSS</div>
  <div class="empty"/>
</div>

需使用兩個子層 item。

第 9 行

.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox 排列
  • flex-direction: column：設定 main axis 為 column
  • height: 100vh：設定 box 高度

15 行

.empty {
  flex-grow: 1;
}
  • flex-grow: 1：表示空白部分剩餘 height 將由此 <div> 平分，因此看起來為垂直靠上

Fixed Position

top004

CSS 垂直靠上，但使用 fixed position 處理。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  height: fit-content;
  position: fixed;
  top: 0;
  bottom: 0;
  margin-bottom: auto;
}
</style>

第 8 行

.box {
  height: fit-content;
  position: fixed;
  top: 0;
  bottom: 0;
  margin-bottom: auto;
}

設定父層 box style：

  • height: fit-content：height 與 content 同高，但仍維持其 block 特性，讓 margin-bottom: auto 有操作空間
  • position: fixed：使用 fixed position
  • top: 0、bottom: 0：要使用 margin-bottom: auto 垂直靠上，前提必須要有空間使其調整 margin，top: 0 於上側邊緣緊貼 browser，bottom: 0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 height: fit-content 只顯示與 content 同高部分，剩下空間可由 margin-bottom: auto 自由發揮而垂直靠上
  • margin-bottom: auto：自動調整 bottom margin 而垂直靠上

Absolute Position

top005

CSS 垂直靠上，但使用 absolute position 處理。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-bottom: auto;
}
</style>

第 8 行

.box {
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-bottom: auto;
}

設定父層 box style：

  • height: fit-content：height 與 content 同高，但仍維持其 block 特性，讓 margin-bottom: auto 有操作空間
  • position: absolute：使用 absolute position，因為其父層皆沒設定定位，相當於定位在 window
  • top: 0、bottom: 0：要使用 margin-bottom: auto 垂直靠上，前提必須要有空間使其調整 margin，top: 0 於上側邊緣緊貼 browser，bottom: 0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 height: fit-content 只顯示與 content 同高部分，剩下空間可由 margin-bottom: auto 自由發揮而垂直靠上
  • margin-bottom: auto：自動調整 bottom margin 而垂直靠上

Relative Position

top000

CSS 垂直靠上，但使用 relative position 處理。

<template>
  <div class="box">
    <div class="item">
      CSS
    </div>
  </div>
</template>

<style scoped>
.box {
  position: relative;
  height: 100vh;
}

.item {
  position: absolute;
  top: 0;
}
</style>

第 2 行

<div class="box">
  <div class="item">
    CSS
  </div>
</div>

需使用兩層 HTML。

10 行

.box {
  position: relative;
}

設定父層 box style：

  • position: relative：父層 box 使用 relative position，子層 absolute position 將以此層定位

15 行

.item {
  position: absolute;
  top: 0;
}

設定子層 item style：

  • position: absolute：子層 item 使用 absolute position
  • top: 0：設定 top 為 0，相當於垂直靠上

Conclusion

  • CSS 擁有多種方式垂直靠上：margin: auto、Flexbox 、 Fixed Position 、Absolute Position 與 Relative Position，可視實際需求靈活運用

# CSS