все div с одинаковой высотой во flexbox с нижней

Question

У меня есть следующий HTML-код для построения сетки с начальной загрузкой 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>

Я хочу, чтобы дата всегда была внизу второй строки.Может быть, картина лучше объясняет проблему.Первые три даты не совпадают с четвертой датой внизу флексбокса:

Answer 1

Вы можете растянуть контейнер date, чтобы заполнить оставшееся пространство строки с помощью flex:1 и выровнять все содержимое по низу с помощью align-items:flex-end: -)

Я исправил ваш примерчуть ниже, вам на самом деле не нужно для дополнительных .row в пределах wrapper - 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>

Answer 2

Невозможно одинаково выровнять содержимое дочерних элементов отдельных родителей flexbox.Однако вы можете сделать столбцы также контейнером flexbox, используя d-flex, а затем mt-auto (margin-top:auto), чтобы перенести даты в конец столбцов.

        <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

Также см .: Самозагрузка 4 карты - тело вертикального выравнивания с переменными строками заголовка