flexbox中所有高度相同的div在底部答案

【问题标题】：all divs with same height in a flexbox with at the bottomflexbox中所有高度相同的div在底部
【发布时间】：2019-03-05 16:01:23
【问题描述】：

我有以下 html 来使用 bootstrap 4 构建网格。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
        here are different heights possible
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  
</div>

我希望日期始终位于第二行的底部。也许这张图片更好地解释了这个问题。前三个日期与弹性框底部的第四个日期不在同一条线上：

【问题讨论】：

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

没有办法在 separate flexbox 父级的子级中同样对齐内容。但是，您可以使用 d-flex 和 mt-auto (margin-top:auto) 使列也成为 flexbox 容器，以将日期推到列的底部。

        <div class="col-sm-12 col-md-3 d-flex flex-column">
            <div class="row">
                <div class="col-lg-12">
                    here are different heights possible
                </div>
            </div>
            <div class="row mt-auto">
                <div class="col-lg-12 date">
                    date
                </div>
            </div>
        </div>

演示：https://www.codeply.com/go/gLYW7liCfc

另见：bootstrap 4 cards - vertical alignment body with variable header line rows

【讨论】：

【解决方案2】：

您可以拉伸date 容器以使用flex:1 填充行的剩余空间，并使用align-items:flex-end 将所有内容与底部对齐:-)

我在下面稍微修改了您的示例，您实际上并不需要在 wrapper 中添加额外的 .row - col-lg-12 应该是您需要换行到下一行的全部内容.

我只添加了border:white 1px solid;，以便您可以看到我的解决方案是如何工作的 - 您可以忽略它。

（您可能需要全屏查看堆叠的元素才能正常工作）！

.wrapper {
  display: flex;
  flex-direction: column;
  background: #1D3159;
  color: white;
}

.date {
  background: #1D3159;
  color: white;
  flex: 1;
  display: flex;
  align-items: flex-end;
  border:white 1px solid;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- just for this example -->

<div class="row">
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible here are different heights possible here are different heights possible here are different heights possible here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
</div>

【讨论】：