Блог

Главная - Вопросы по программированию - Вертикальный пробел между столбцами Flexbox не работает

Вертикальный пробел между столбцами Flexbox не работает

#html #css #flexbox #bootstrap-4

#HTML #css #flexbox #bootstrap-4

Вопрос:

Как мне сделать пробел между вертикальным содержимым? В примере, в третьем столбце я ожидаю, что смогу выровнять-содержимое-между красным и черным разделениями БЕЗ указания высоты (в настоящее время это здесь для примера). Разве я не могу сделать это без него, так как у нас уже есть максимальная высота от среднего столбца?

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-center">
  <div class="col-auto">
    <div>asdqwd</div>
  </div>
  <div class="col d-flex flex-column text-center">
    <div>rgergre</div>
    <div>vs</div>
    <div>rger ergerg</div>
  </div>
  <div class="col-auto d-flex flex-column justify-content-between" style="height:72px">
    <div style="height:20px;width:20px;background:red">ewf</div>
    <div style="height:20px;width:20px;background:black">qwd</div>
  </div>
</div>

https://jsfiddle.net/xmkrt21j/2/

Комментарии:

1. AFAIK, вы должны определить высоту для конкретного контейнера

Ответ №1:

Выравнивание по центру элементов сбрасывает его на .d-flex align-items-center

Два варианта:

1) Добавьте align-self: stretch в третий сгибаемый блок.

2) Удалите align-items: center и добавьте align-self: center в первый блок.