如何使用 CSS 将项目与容器中的 flex-end 对齐？

在使用 Flexbox 布局时，我们可以很方便地使用 justify-content 和 align-items 属性来对齐容器中的项目。其中，justify-content 属性用于设置水平方向上的对齐方式，align-items 属性用于设置垂直方向上的对齐方式。

如果我们想要将项目沿着垂直方向向容器的底部对齐，可以使用 align-items: flex-end; 属性。下面是具体的代码示例：

.container {
  display: flex;
  align-items: flex-end;
}

在上面的示例中，我们将容器的 display 属性设置为 flex，然后使用 align-items 属性将项目沿着垂直方向向容器的底部对齐。

需要注意的是，为了使对齐效果生效，容器中的项目需要有一定的高度。如果项目没有设置高度，它们将会默认使用它们的内容高度，此时对齐效果可能无法生效。

除了 align-items 属性，我们还可以使用 align-self 属性来对单个项目进行垂直方向上的对齐。align-self 属性接受与 align-items 相同的值，用于设置该项目自身的对齐方式。

下面是具体的代码示例：

.container {
  display: flex;
  align-items: flex-end;
}
.item {
  align-self: flex-end;
}

在上面的示例中，我们使用 align-items: flex-end; 将容器中的项目沿着垂直方向向容器的底部对齐，然后使用 align-self: flex-end; 将特定的项目自身沿着垂直方向向容器的底部对齐。

总之，在使用 Flexbox 布局时，我们可以通过设置 align-items 和 align-self 属性来实现垂直方向上的对齐，从而更加灵活地布局我们的页面。