Flexbox 右对齐最后一项

Flexbox 是一种用于排版的 CSS 技术，它可以让我们更便捷的控制元素在容器中的位置和大小。在实际开发中，我们常常会遇到将最后一项元素右对齐的需求，这篇介绍就是为了解决这个问题。

右对齐最后一项的 CSS 代码

首先，我们来看一下如何用 Flexbox 右对齐最后一项。代码如下：

.container {
  display: flex;
  justify-content: space-between;
}

.container > *:last-child {
  align-self: flex-end;
}

解释一下上述代码的作用：

1. 使用 display: flex; 将容器转换为 Flex 容器，通过指定此属性，子元素即可使用 Flexbox 的相关属性。
2. 使用 justify-content: space-between; 将子元素沿主轴（横向）方向间隔排列，最左侧和最右侧的子元素贴近容器边缘，子元素之间的间隔相等。
3. 使用 align-self: flex-end; 将最后一个子元素在交叉轴（纵向）方向上对齐到容器底部。

实际应用示例

为了更好的理解如何使用上述代码，我们接下来演示两个具有代表性的实际应用场景。

示例一：按钮组

在按钮组中，我们通常希望最后一个按钮在右侧，代码如下：

<div class="button-group">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

.button-group {
  display: flex;
  justify-content: space-between;
}

.button-group > *:last-child {
  align-self: flex-end;
}

效果如下：

示例二：卡片列表

在卡片列表中，我们通常希望最后一列卡片在右侧，代码如下：

<div class="card-list">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-list > *:last-child {
  align-self: flex-end;
}

效果如下：

结论

当我们遇到需要将最后一项元素右对齐的需求时，使用上述代码即可轻松实现。值得一提的是，Flexbox 还有很多实用的属性，它可以解决更多的排版问题，希望大家能够好好学习和掌握。