Flexbox元素对齐问题：如何将最后一个元素定位到容器底部右侧？

我懂你的困扰——当flex容器高度比内部元素总高度高时，想把最后一个元素固定在底部靠右，但align-self: flex-end完全没起作用。这其实是因为当前布局结构让每个子元素单独占了一行，align-self只能作用于元素所在的那一行，而该行被align-content: flex-start推到了容器顶部，自然达不到你要的效果。

下面给你两种实用的解决方案：

方案一：改用flex-direction: column（推荐） #

把flex容器的排列方向改成垂直，然后给需要底部对齐的元素加margin-top: auto——这个属性会自动填充元素上方的所有空白，把它推到容器底部，再配合text-align: right就能实现靠右对齐。

修改后的CSS代码：

.flex{
  display: flex;
  flex-direction: column; /* 切换为垂直排列 */
  align-items: flex-start; /* 子元素默认靠左对齐 */
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
img{
  width: 100%;
  height: 250px;
}
.flex div{
  width: 100%;
}
.bottom{
  margin-top: auto; /* 关键：自动填充上方空间，将元素推至底部 */
  text-align: right;
}

方案二：保留flex-wrap: wrap的兼容方案 #

如果因为其他布局需求必须保留flex-wrap: wrap，可以给容器设置align-items: flex-start，同时给.bottom添加margin-top: auto来实现效果：

修改后的CSS代码：

.flex{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 确保行内元素顶部对齐 */
  width: 500px;
  height: 600px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
img{
  width: 100%;
  height: 250px;
}
.flex div{
  width: 100%;
}
.bottom{
  margin-top: auto; /* 自动填充上方空白，推至容器底部 */
  text-align: right;
}

为什么原来的align-self: flex-end没用？ #

因为你给所有子元素都设置了width: 100%，flex-wrap: wrap会让每个元素单独占据一行，此时容器的align-content: flex-start会把所有行堆叠在容器顶部。align-self: flex-end只能让.bottom在它自己的那一行内底部对齐，但那一行的高度就是.bottom内容的高度，所以视觉上还是在容器上半部分，完全达不到你想要的底部定位效果。

内容的提问来源于stack exchange，提问作者Sefam