弹性盒子如何设置水平两端对齐

弹性盒子（Flexbox）是一种用于布局网页元素的CSS技术，可以方便地实现响应式设计和灵活的容器布局。若你想让元素在水平方向上两端对齐，可以使用`justify-content`属性。以下是设置水平两端对齐的两种常见方式：

1. 对齐空间均分（默认值）：
如果没有特别指定，`justify-content` 的默认值通常是 `flex-start` 或 `left`，表示开始对齐。如果你想实现两端对齐，你可以设置它为 `space-between`，这会让项目之间的间隔相等，并将剩余的空间分配到两端。

.container {
   display: flex;
   justify-content: space-between; /* 水平两端对齐 */
}

2. 使用 `auto` 和 `align-items` 配合：
另一种常见的方法是结合使用 `align-items: center;` 确保子元素在垂直方向居中，然后使用 `justify-content: flex-end;` 将最后一个项目拉到右侧，其它项目则自动填充。

.container {
   display: flex;
   align-items: center; /* 垂直居中 */
   justify-content: flex-end; /* 最后一项靠右 */
}