Flex布局：如何让子元素默认flex-start对齐，仅最后一个居底？

先直接给结论：你没法用align-content和align-self的组合实现这个效果，原因得给你掰扯明白：

1. 你的容器设置了flex-wrap: wrap，且每个子元素宽度100%，所以每个子元素会单独占一行，形成多行flex容器。align-content的作用是控制所有行整体在交叉轴上的对齐方式，它不会影响单个元素在其所在行内的位置。
2. align-self是用来覆盖align-items的设置，控制单个元素在自身所在行的交叉轴对齐。但你的每个行的高度都是由子元素本身高度决定的（行高=元素高度），所以给最后一个元素加align-self: flex-end根本看不出变化——它本来就在自己行的底部，而行本身还是跟着align-content: flex-start停在容器顶部。

那该怎么实现你要的效果？最常用也最简洁的方法是利用flex容器里的margin-top: auto，这个属性会自动“吃掉”容器内的剩余空间，把元素推到交叉轴的另一端。

修正后的代码示例 #

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 15px 50px 15px;
  height: 500px;
  background: red;
  width: 200px;
}

.item-1, .item-2, .item-3 {
  width: 100%;
  /* 给元素加个高度方便直观看到效果 */
  height: 50px;
  background: #fff;
  margin-bottom: 10px;
}

.item-3 {
  /* 关键：用auto margin把自己推到底部 */
  margin-top: auto;
  margin-bottom: 0; /* 去掉默认的margin-bottom，避免底部留白 */
}

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

另一种更直观的思路：改用垂直flex布局 #

既然你的子元素都是100%宽度，本来就会自动换行，其实可以直接把容器改成垂直方向的flex，代码会更简洁：

.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: flex-start; /* 子元素默认顶部对齐 */
  padding: 15px 15px 50px 15px;
  height: 500px;
  background: red;
  width: 200px;
}

.item-1, .item-2, .item-3 {
  height: 50px;
  background: #fff;
  margin-bottom: 10px;
}

.item-3 {
  margin-top: auto;
  margin-bottom: 0;
}

这个写法和上面的效果完全一致，但不需要依赖flex-wrap来实现换行逻辑，代码逻辑更清晰。

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