网格布局中让较短div填充垂直剩余空间并对齐列表元素到底部

嘿，这个场景太常见了！既然你已经通过外层flex实现了所有产品容器的等高，完全不用给所有嵌套div都套flex，只需要针对产品项本身做一点点调整就能让按钮整齐贴到底部，给你两个超实用的方案：

方案一：利用flex-grow让内容区撑满空间 #

只需要给每个产品项的容器设置flex-direction: column，然后让标题、描述所在的内容容器占满剩余空间，按钮自然就会被挤到底部：

/* 假设你的单个产品容器类是.product-card */
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 继承外层flex分配的等高高度 */
}

/* 包裹标题和描述的容器 */
.product-card .product-content {
  flex-grow: 1; /* 占满容器除了按钮之外的所有空间 */
}

这个方案的好处是结构清晰，内容区会自动填充空白，按钮始终固定在底部。

方案二：用margin-top:auto直接定位按钮 #

如果你的产品项已经是flex column布局了，甚至不用改内容容器，直接给按钮加margin-top: auto就行：

.product-card button {
  margin-top: auto;
}

原理是flex容器里的margin auto会自动分配剩余空间，这个属性会把按钮向上的剩余空间全部“吃掉”，直接把按钮推到底部，代码量最少！

注意事项 #

• 确保产品项容器（.product-card）的高度是100%，因为外层flex已经让所有项等高，这里继承高度才能让内部的flex属性生效。
• 如果你的产品项是Grid布局的直接子元素，也可以给Grid项设置display: flex; flex-direction: column，效果是一样的。

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