Vue3 x + Vite2 x 入门实战 02：理清各类对齐属性的差异

前言

在前端开发中，对齐属性是控制元素在容器中如何对齐的重要手段。合理使用对齐属性可以使布局更加美观、整洁，并增强用户体验。本文将结合Vue3和Vite2框架，以实际案例演示text-align、align-item、vertical-align和justify-content这四个常见对齐属性的用法和区别，帮助您更好地掌握元素布局技巧。

text-align

text-align属性用于设置文本在元素中的对齐方式。它可以取以下几个值：

• left：将文本左对齐。
• center：将文本居中对齐。
• right：将文本右对齐。
• justify：将文本两端对齐，即文本左右两端与容器边界对齐。

<template>
  <div class="text-align-container">
    <p class="text-align-left">左对齐</p>
    <p class="text-align-center">居中对齐</p>
    <p class="text-align-right">右对齐</p>
    <p class="text-align-justify">两端对齐</p>
  </div>
</template>

<script>
export default {
  name: "TextAlignDemo"
};
</script>

<style>
.text-align-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 300px;
  border: 1px solid black;
  padding: 20px;
}

.text-align-left {
  text-align: left;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.text-align-justify {
  text-align: justify;
}
</style>

运行上述代码，您将在页面上看到一个包含四个段落的容器。第一个段落左对齐，第二个段落居中对齐，第三个段落右对齐，第四个段落两端对齐。

align-item

align-item属性用于设置弹性子项在弹性容器中的对齐方式。它可以取以下几个值：

• flex-start：将子项沿主轴的起始位置对齐。
• flex-end：将子项沿主轴的末尾位置对齐。
• center：将子项沿主轴的中心位置对齐。
• baseline：将子项沿基线对齐。
• stretch：将子项拉伸以填充整个容器。

<template>
  <div class="align-item-container">
    <div class="align-item-flex-start">沿主轴起始位置对齐</div>
    <div class="align-item-flex-end">沿主轴末尾位置对齐</div>
    <div class="align-item-center">沿主轴中心位置对齐</div>
    <div class="align-item-baseline">沿基线对齐</div>
    <div class="align-item-stretch">拉伸以填充整个容器</div>
  </div>
</template>

<script>
export default {
  name: "AlignItemDemo"
};
</script>

<style>
.align-item-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 300px;
  border: 1px solid black;
  padding: 20px;
}

.align-item-flex-start {
  align-self: flex-start;
}

.align-item-flex-end {
  align-self: flex-end;
}

.align-item-center {
  align-self: center;
}

.align-item-baseline {
  align-self: baseline;
}

.align-item-stretch {
  align-self: stretch;
}
</style>

运行上述代码，您将在页面上看到一个包含五个子项的容器。第一个子项沿主轴的起始位置对齐，第二个子项沿主轴的末尾位置对齐，第三个子项沿主轴的中心位置对齐，第四个子项沿基线对齐，第五个子项拉伸以填充整个容器。

vertical-align

vertical-align属性用于设置元素在垂直方向上的对齐方式。它可以取以下几个值：

• baseline：将元素沿基线对齐。
• sub：将元素向下移动半个字符。
• super：将元素向上移动半个字符。
• top：将元素与容器顶部对齐。
• middle：将元素与容器中间对齐。
• bottom：将元素与容器底部对齐。

<template>
  <div class="vertical-align-container">
    <p class="vertical-align-baseline">沿基线对齐</p>
    <p class="vertical-align-sub">向下移动半个字符</p>
    <p class="vertical-align-super">向上移动半个字符</p>
    <p class="vertical-align-top">与容器顶部对齐</p>
    <p class="vertical-align-middle">与容器中间对齐</p>
    <p class="vertical-align-bottom">与容器底部对齐</p>
  </div>
</template>

<script>
export default {
  name: "VerticalAlignDemo"
};
</script>

<style>
.vertical-align-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 300px;
  border: 1px solid black;
  padding: 20px;
}

.vertical-align-baseline {
  vertical-align: baseline;
}

.vertical-align-sub {
  vertical-align: sub;
}

.vertical-align-super {
  vertical-align: super;
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-bottom {
  vertical-align: bottom;
}
</style>

运行上述代码，您将在页面上看到一个包含六个段落的容器。第一个段落沿基线对齐，第二个段落向下移动半个字符，第三个段落向上移动半个字符，第四个段落与容器顶部对齐，第五个段落与容器中间对齐，第六个段落与容器底部对齐。

justify-content

justify-content属性用于设置弹性子项在弹性容器中的对齐方式。它可以取以下几个值：

• flex-start：将子项沿主轴的起始位置对齐。
• flex-end：将子项沿主轴的末尾位置对齐。
• center：将子项沿主轴的中心位置对齐。
• space-between：将子项在主轴上均匀分布，相邻子项之间没有间隙。
• space-around：将子项在主轴上均匀分布，相邻子项之间有间隙。
• space-evenly：将子项在主轴上均匀分布，相邻子项之间有相同间隙。

<template>
  <div class="justify-content-container">
    <div class="justify-content-flex-start">沿主轴起始位置对齐</div>
    <div class="justify-content-flex-end">沿主轴末尾位置对齐</div>
    <div class="justify-content-center">沿主轴中心位置对齐</div>
    <div class="justify-content-space-between">均匀分布，无间隙</div>
    <div class="justify-content-space-around">均匀分布，有间隙</div>
    <div class="justify-content-space-evenly">均匀分布，间隙相同</div>
  </div>
</template>

<