Иногда возникает задача сделать на сайте столбцы одинаковой высоты для разного количества текста.  В статье показан способ вертикального выравнивания столбцов в Divi Builder с помощью CSS Flexbox.

Что такое Flexbox?

CSS flexbox (Flexible Box Layout Module) представляет собой способ компоновки элементов на веб-странице.

Flexbox состоит из flex-контейнера (родительского контейнера) и flex-элементов (дочерних блоков). Дочерние элементы могут выстраиваться в строку или столбец, а оставшееся свободное пространство распределяется между ними различными способами.

Когда Flexbox используется в теме Divi, нужно знать, что некоторые из других правил CSS больше не работают. Например, некоторые объекты могут не отвечать на разные размеры видовых экранов. Поэтому при использовании Flexbox нужно использовать запросы @media

Как вертикально выравнивать элементы Divi Builder с помощью Flexbox

Для примера создай новую страницу или запись и используй Divi Builder для настройки раздела с одной строкой и тремя столбцами:

Затем добавь три модуля «краткое описание» и три кнопки под ними.

В модули добавь произвольный контент и нажми «Предварительный просмотр».  Страница будет выглядеть примерно так:

Примечание. Для этого примера вокруг каждого столбца добавлена граница чтобы показать размеры столбцов и использовны 2 модуля на столбец.

Далее добавь имя класса CSS для строки (зеленая секция Divi Builder), чтобы можно настраивать столбцы. Чтобы добавить CSS нажми на «гамбургер-меню» строки:

Перейди на вкладку «Расширенный» и введи имя класса flex-row-wrapper  в поле «Класс CSS».

Затем добавь немного кода CSS, чтобы настроить элементы класса flex-row-wrapper. Скопируй приведенный ниже код и вставь его в одно из мест:

• Раздел CSS страницы
• Пользовательский блок CSS на странице параметров темы Divi
• В таблицу стилей дочерной темы.

.flex-row-wrapper {
 display: flex;
 }

После добавления CSS обнови страницу и посмотри результат.

Одной строкой CSS достигнута равная высота ряда. На этом этапе можно добавить дополнительный CSS, чтобы дизайн выглядел еще лучше.

В нашей внутренней конфигурации модуль «Строка» — это родительский контейнер, а три столбца будут дочерними элементами Flex.

Применим те же самые соглашения (родитель — дочерный элемент) для столбцов:. дочерные элементы каждого столбца являются модуль «краткое описание» и модуль «кнопка».

Следующий шаг — настроить отображение каждого из дочерных элементов.

Используя средство разработчика  в браузере, проверь элементы страницы, чтобы идентифицировать имена классов столбцов. Для этого щелкни правой кнопкой мыши на модуле и выбери соответствующее меню (для Firefox — «исследовать элемент»).

В отдельном окне среди кода страницы найдя строку с именем соего класса (в нашем случае «flex-row-wrapper»)  увидишь имена классов CSS для каждого столбца.

Я собираюсь выбрать общее имя класса для каждого столбца.
Здесь можно выбрать либо .et_pb_column  либо .et_pb_column_1_3.
Я выбираю класс .et_pb_column.  Для меня он более общий и может упростить использование одного и того же CSS в разных модулях.

Чтобы настроить дочерные элементы  используем следующий CSS:

.flex-row-wrapper .et_pb_column{
 display: flex;
}

В коде использую родительское имя класса CSS  .flex-row-wrapper, чтобы ограничить область действия кода.  Иначе можно изменить все столбцы на сайте!

Результат работы кода будет примерно таким:

По умолчанию правило CSS  display:flex;  устанавливает направление размещения элементов в строку.  Для  размещения элементов в столбец  добавь команду CSS: flex-direction: column;

.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
}

Реультат применения правила:

Теперь мы вернулись к тому, где уже были в начале статьи. Однако элементы столбца теперь очнь гибки. Это означает, что мы можем легко применять дополнительные правила СSS для настройки размещения элементов.
К примеру правило: justify-content: space-between; распределяет объекты одинаково по оси.

.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 justify-content: space-between;  
}

Результат применения правила:

Несколько строк CSS преобразуют модули Divi в равные высоты строк.
Полный код выглядит следующим образом:

.flex-row-wrapper {
 display: flex;
}
 
.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 border: 1px solid black;
 justify-content: space-between;
}

Добавление медиа-запросов в наш пример Flexbox

Ранее в этой статье было упомянуто, что некоторые команды Flex могут переопределять другие стили CSS.

Когда ты добавляешь команду CSS display: flex;  то тем самым поручаешь DOM игнорировать статус float для родительского элемента и его непосредственного дочернего элемента. При изменении размеров экрана элементы могут «налезать» на друг друга.  Чтобы увидеть это в действии, уменьши размер экрана в браузере и посмотри на размещение элементов с поддержкой flex.

Чтобы решить эту проблему, нужно использовать медиа-запросы добавив строки кода:

@media screen and (max-width: 981px) {
  .flex-row-wrapper  { 
   flex-direction:column;
}
}

Вывод

Используя несколько строк CSS можно успешно сделать из столбцов разного размера столбцы одинаковой высоты.

Если хочешь экспериментировать дальше — попробуй тот же пример с 2 или 4 столбцами. Он должен работать так же.  Не забудь настроить ширину браузера и проверить, что элементы выглядят нормально на меньших экранах. Поэкспериментируй с правилами @media и не бойся устанавливать некоторые из них по мере необходимости.

Если у тебя есть какие-либо вопросы или комментарии, добавь их ниже — мне нравится получать отзывы.

Александр Коваль