Как правильно выровнять блоки по высоте в Bootstrap, правильная ли реализация?

Question

[dmitriu256]

Правильно ли выравнивать блоки по высоте применяя свойство d-flex к каждой колонке (col) или есть более универсальное решение применяя свойства непосредственно к row?

<section class="test">
    <div class="container">
        <div class="row">
            <!-- Блок1 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

            <!-- Блок2 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam aspernatur doloribus ducimus
                        exercitationem impedit inventore ratione voluptatum.
                        Ab aliquid est natus, obcaecati officiis quae.thtyhtyh hyhyhy ythtyh htyhtyhy ythtyhtyhtyh</p>
                </div>
            </div>

            <!-- Блок3 -->
            <div class="col-4 d-flex">
                <div class="block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, praesentium?</p>
                </div>
            </div>
        </div>
    </div>
</section>

.block
  width: 100%
  padding-bottom: 10px
  border: 2px solid red
  background: pink

Из документации

<div class="d-flex p-2 bd-highlight" >I'm a flexbox container!</div>

Что пробовал:
1. Применяя d- flex к row - результата не дало, т.к. row изначально флекс элемент
2. Обертка колонок в класс d-flex тоже результата не принесло.
3. Классический путь решения данной задачи
родительскому элементу над блоками задается свойство flex и как результат все элементы принимают высоту самого большого блока

Comments

[Антон Литвиненко]

не совсем понятно как нужно выровнять блоки по высоте. По умолчанию в четвертом бутстрапе колонки в ряду равны по высоте и занимают всю высоту. для выравнивания по центру нужно ряду дать .align-items-center

[dmitriu256]

Anton Litvinenko, необходимо чтобы содержимое колонки (в данном случае содержимое .block)
было одной высоты.
Скрин (без класса .d-flex у колонок .col-4)

Answer 1

[Андрей Гуртовой]

Как я понял , d-flex. Это некая утилита для назначения display: flex для элемента.

Если так то наверное это будет оверхедом для вашей задачи. Просто избавьтесь от div которые у вас в примере написаны без классов. Флекс-дети итак по умолчанию имеют свойство align-item: stretch; которое их растягивает до высоты максимального брата.

Comments

[Андрей Гуртовой]

Упс. Ошибочка. Избавляться нужно от div.block и от p
Вообще решение зависит от задачи.

Какую вы решаете на данный момент?

Если подкрасить фон, тогда изменяйте его у элементов .col-4. если растянуть дочерний блок, то возможно d-flex годится

Если хотите сделать ещё одну утилиту для вашего бутстрапа, которая растянет всё что увидит внутри дочерних блоков, то можете сделать что-то вроде .row.row-d-flex * { display: flex;}
Но это очень не хорошее решение, найдите другой способ сделать это.

[dmitriu256]

Андрей Гуртовой, в теме было описано схематически.
А вот то что сверстал для реального проекта
Выравнивание колонок по высоте
1) С использованием встроенного класса от бутстрапа d-flex (применяю именно ко всей колонке)

<div class="row">
            <div class="col-12 col-lg-3 d-flex">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/order.png" alt="Заявка">
                    </div>

                    <h3 class="schema-block__title">Заявка</h3>

                    <p class="schema-block__descr">
                        Оставляете онлайн заявку или звоните [phone]
                    </p>
                </div>
                <!-- /.schema-block -->
            </div>
            <!-- /.col-3 -->

            <div class="col-12 col-lg-3 offset-lg-1 d-flex">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/delivery.png" alt="Выезд специалиста">
                    </div>

                    <h3 class="schema-block__title">Выезд специалиста</h3>

                    <p class="schema-block__descr">
                        В течение 1 рабочего дня к Вам приезжает специалист, который выполнит замеры для точной стоимости работ
                    </p>
                </div>
                <!-- /.schema-block -->
            </div>
            <!-- /.col-3 -->

            <div class="col-12 col-lg-3 offset-lg-1 d-flex">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/agreem.png" alt="Составление договора">
                    </div>

                    <h3 class="schema-block__title">Составление договора</h3>

                    <p class="schema-block__descr">
                        Готовим договор и согласовываем с Вами
                    </p>
                </div>
                <!-- /.schema-block -->
            </div>
            <!-- /.col-3 -->

            <div class="col-12 col-lg-3 d-flex">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/startwork.png" alt="Начало работ">
                    </div>

                    <h3 class="schema-block__title">Начало работ</h3>

                    <p class="schema-block__descr">
                        Доставляем материалы, оборудование, подписываем договор и начинаем работы
                    </p>
                </div>
                <!-- /.schema-block -->
            </div>
            <!-- /.col-3 -->

            <div class="col-12 col-lg-3 offset-lg-1 d-flex">
                <div class="schema-block">
                    <div class="schema-block__img">
                        <img src="img/schema/finish.png" alt="Завершение работ">
                    </div>

                    <h3 class="schema-block__title">Завершение работ</h3>

                    <p class="schema-block__descr">
                        После окончания работ Вы проверяете качество и подписываете акт сдачи, производите оплату.
                    </p>
                </div>
                <!-- /.schema-block -->
            </div>
            <!-- /.col-3 -->
        </div>

Стили

.schema
  background: #ffffff
  &-subtitle
    margin-bottom: 50px

  &-block
    display: flex
    flex-direction: column
    color: $text-color
    margin-bottom: 30px
    text-align: left
    border: 1px solid red
    &__img
      margin-bottom: 25px
      max-width: 146px
      height: 105px
    &__title
      margin-bottom: 25px
      font-size: 19px
      font-weight: 700
    &__descr
      font-size: 17px

2) Без класса d-flex имею следующую картину


Как правильнее?
Я склоняюсь к первому варианту.

Упс. Ошибочка. Избавляться нужно от div.block и от p

И еще один вопрос насколько семантически правильно заверстал данный блок
Буду благодарен за Ваш ответ