Delgus
@Delgus

Как прижать блок к низу bootstrap4 flex?

есть допустим вот такая верстка
<div class="container">
    <div class="row">
      <div class="col-4 align-items-stretch">
        <div class="product">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
          <div> Down </div>
        </div>
      </div>
       <div class="col-4">
        <div class="product">
          Test
        </div>
        <div> Down </div>
      </div>
       <div class="col-4">
        <div class="product">
          Test
        </div>
        <div> Down </div>
      </div>
    </div>
</div>


Я хочу чтоб div с product занимал все свободное пространство по высоте, а div в котором down был прижат к низу. Никак не могу это заставить работать.

Вот пример моих мучений - https://codepen.io/delgus/pen/wvMqvER
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
FinGanapre
@FinGanapre
Например так. Доки. И немного о флексах
<div class="container">
    <div class="row">
      <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
          <div> Down </div>
        </div>
      </div>
       <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
        </div>
        <div> Down </div>
      </div>
       <div class="col-4 d-flex flex-column">
        <div class="flex-grow-1">
          Test
        </div>
        <div>Down</div>
      </div>
    </div>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы