如何在flexbox布局中将内部div对齐到容器底部？

问题根源 #

你之前使用的align-content: flex-end仅对存在多行换行的flex容器生效，本次场景中需要对齐的.parameters是.product--5-cols的子元素，而.product--5-cols本身未被设置为flex容器，相关对齐属性自然不会生效。

解决代码 #

仅需要新增2处CSS配置即可实现需求：

.product--5-cols {
    max-width: 23%;
    min-width: 250px;
    -webkit-flex-basis: 23%;
    -ms-flex-preferred-size: 23%;
    flex-basis: 23%;
    border-width: 0 1px 1px 0;
    /* 新增：将每个列设为纵向flex容器 */
    display: flex;
    flex-direction: column;
}

/* 新增：自动顶到容器底部 */
.parameters {
    margin-top: auto;
}

实现逻辑 #

1. 你外层.compare已经设置了align-items: stretch，所以所有.product--5-cols的高度会自动统一为整行最高列的高度
2. 纵向flex容器下，给子元素设置margin-top: auto时，弹性布局会将所有剩余的纵向空白空间都分配给这个上外边距，直接把.parameters块推到容器最底部，不管上方内容长度多少都能保持底部对齐。

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