如何将flex布局容器的最后一个子元素对齐到底部？

• 当前实现效果：
  
• 预期实现效果：
  

不需要修改现有DOM结构，Flex和Grid布局都可以实现该对齐效果，无需额外引入JS或重构DOM。你当前代码未达到预期，是因为存在类名笔误、布局属性配置不全的问题。

方案一：保留原有Flex布局，修正属性即可 #

原有代码的问题点：

• CSS中容器选择器写的是.sections，但HTML中实际容器类名为section，选择器不匹配
• 卡片容器.box未配置纵向弹性盒规则，内部内容无法自动分布
• .box上设置的display: inline-block、vertical-align: top属于冗余属性，对Flex子项不生效

修正后可直接运行的CSS代码：

.section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -1em 2em -1em;
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  min-width: 300px;
  max-width: 420px;
  margin: 1em;
  border-radius: 10px;
  padding: 1em;
  border: 1px solid #eee;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}

.itm {
  position: relative;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
}

原理：Flex布局默认align-items: stretch，会自动让同一行的卡片高度拉伸至该行最高卡片的高度；给.box设置纵向Flex后，通过margin-top: auto会自动把底部元素区推到卡片最下方，实现同列底部对齐。

方案二：使用Grid布局，适配性更强 #

对于自适应多列卡片场景，Grid布局逻辑更简洁，不需要处理Flex换行的行高计算问题，替换容器CSS即可：

.section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 420px));
  gap: 2em;
  justify-content: start;
  margin-bottom: 2em;
}

.box {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 1em;
  border: 1px solid #eee;
}

.elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}

.itm {
  position: relative;
  width: 100px;
  margin: 1em;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%);
  padding: 0.5em;
}

原理：Grid布局的网格单元默认会自动拉伸高度匹配同列/同行规则，卡片设置纵向Flex加margin-top: auto即可实现底部元素对齐，列宽会根据容器尺寸自动适配换行。

两种方案都不需要改动原有HTML结构，直接替换对应CSS即可达到预期效果。

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