使用Bootstrap Flexbox将Div对齐到父Div底部时其他Div对齐失效

我明白你的困扰——用align-self: end虽然能把footer钉在底部，但会打乱顶部标题的对齐。其实我们可以换个思路，利用Flexbox的flex-grow属性来实现需求，同时完全兼容你需要的移动端列布局。

核心思路 #

把每个卡片容器（.normal-article）设置为垂直方向的Flex容器，然后让卡片里的主内容区域（标题、正文等）占据容器的剩余空间，这样footer自然会被“挤”到底部，而顶部的内容会保持默认的顶部对齐。

具体代码调整 #

1. 先给卡片容器添加Flex布局：

.normal-article {
  display: flex;
  flex-direction: column;
  height: 100%; /* 让所有卡片高度一致，确保footer对齐整齐 */
}

2. 给卡片内的主内容区域（比如包裹标题、正文的容器）添加flex-grow: 1：

/* 假设你的主内容区域有个类，比如.card-main-content，根据实际结构调整 */
.card-main-content {
  flex-grow: 1; /* 这个属性会让内容区域填充卡片里除footer外的所有剩余空间 */
}

3. 移除.footer-bottom上的align-self: end，现在它会自动落在卡片底部：

.footer-bottom {
  /* 不需要align-self: end了，flex column布局下它会自然在底部 */
  /* 可以保留你原来的样式，比如padding、背景色等 */
}

为什么这个方案可行？ #

• 垂直Flex容器（flex-direction: column）下，子元素默认沿顶部排列，所以标题等内容会自然对齐，不会像align-self: end那样打乱布局。
• flex-grow: 1的内容区域会自动填充卡片的剩余高度，不管卡片内内容多少，都会把footer推到底部。
• 完全兼容你需要的移动端列布局：卡片内部的Bootstrap列（row/col-*）可以正常工作，因为我们只是调整了卡片容器的Flex属性，不会影响内部的布局结构。

示例结构参考 #

你的卡片结构大概可以改成这样：

<div class="mb-4 col-lg-4 normal-article">
  <article>
    <div class="card-main-content">
      <!-- 这里放标题、正文、移动端列布局的内容 -->
      <h3 class="card-title">文章标题</h3>
      <div class="row">
        <div class="col-6">移动端列1</div>
        <div class="col-6">移动端列2</div>
      </div>
      <p>文章正文内容...</p>
    </div>
    <div class="footer-bottom">
      <!-- 底部内容，比如日期、标签 -->
      <span>2024-05-20</span>
    </div>
  </article>
</div>

这样调整后，所有卡片的.footer-bottom都会整齐地对齐到底部，同时顶部的标题和内容也能保持完美对齐，还不影响移动端的列布局效果。

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