Отключение равной высоты колонок в Flexbox: решение

Быстрый ответ

Чтобы предотвратить выравнивание колонок по высоте в Flexbox, присвойте дочерним элементам свойство align-self со значением auto или flex-start. Это позволит им быть свободными от обязанности соответствовать высоте окружающих элементов и выбрать нужные размеры.

.flex-child {
  align-self: flex-start; /* "Я выбираю свой путь" */
}

Примените этот код ко всем элементам с классом flex-child, которым не следует присоединяться к общему потоку.

Настоящий контроль с помощью свойства flex

Если требуется более тонкая настройка, установите для дочерних элементов свойство flex со значением none. Так они однозначно откажутся от попыток адаптироваться под размеры соседей.

.flex-child {
  flex: none; /* "Я самодостаточен" */
}

Мастерство управления выравниванием

Flexbox открывает нам ранее невиданные возможности управления выравниванием благодаря свойствам align-items и align-self. Задайте align-items: flex-start на уровне контейнера, чтобы прекратить гонку за наивысшую, подтягивающую все остальные вверх, позицию.

.flex-container {
  display: flex;
  align-items: flex-start; /* "Вытянутости здесь не место" */
}

Используйте align-self для отдельных дочерних элементов, чтобы захватить контроль над их высотой.

Дизайнерские тенденции — время ценить разнообразие высот!

В наступающую эпоху единообразных высот входит новый дизайнерский тренд, ценящий уникльность и многообразие. Несмотря на свою практичность, функция выравнивания колонок в Flexbox по высоте становится устаревшим решением, требующим переосмысления под новые тренды дизайна.

Неравные высоты с Bootstrap

Чтобы настроить колонки с разной высотой в макете, воспользуйтесь Flexbox с использованием Bootstrap 4, добавьте класс .align-items-start. Стиль "единообразности" уходит в прошлое!

<div class="d-flex align-items-start">
  <!-- здесь будут ваши колонки, каждая со своей индивидуальной высотой -->
</div>

Визуализация

Давайте представим колонки Flexbox в образе стикменов.

До: Колонки Flexbox равной высоты
🚶‍♀️🚶‍♀️🚶‍♀️
🚶‍♀️🚶‍♀️🚶‍♀️
🚶‍♀️🚶‍♀️🚶‍♀️
🚶‍♀️🚶‍♀️🚶‍♀️

А теперь взгляните на результат отключения выравнивания по высоте.

После: Отключено равное выравнивание по высоте
🚶‍♀️
🚶‍♀️🚶‍♀️
🚶‍♀️🚶‍♀️🚶‍♀️
🚶‍♀️

Как видите, каждый имеет право быть "высоким" по-своему!

Центрирование и выравнивание

Используйте свойство align-items: center для вертикального центрирования элементов.

.flex-container {
  display: flex;
  align-items: center; /* "Держи баланс и останься посередине" */
}

Подробнее об этом расскажет наш спикер на видео

Вся шкала от центра до вершины под контролем!

Вы также можете контролировать положение каждого отдельного элемента, переопределив родительское свойство align-items на align-self: flex-start.

От таблиц к Flexbox

С тех времён, когда таблицы и отрицательные отступы были лучшим решением для достижения равной высоты колонок, до эры Flexbox — наше путешествие в мире вёрстки было непростым. Теперь переключение между равной и разной высотой колонок стало вопросом простого изменения свойства.

Практические упражнения

"Лучше один раз увидеть" — не перекидывайте страницу книги, а вместо этого попробуйте воспользоваться такими инструментами, как Flexbox Froggy, которые позволят вам экспериментировать с различными свойствами и наблюдать изменения вживую.

Осторожно с нововведениями

При отключении выравнивания колонок по высоте сохраняйте бдительность:

• Содержимое остаётся внутри контейнеров без переполнения?
• Макет выглядит корректно на различных устройствах?
• Насколько хорошо работают ваши стили в разных браузерах?

Имейте в виду, что тестирование — ваш надёжный помощник в данном путешествии.

Полезные материалы

1. Основные концепции Flexbox – CSS: Каскадные таблицы стилей | MDN
2. Полное руководство по Flexbox | CSS-Tricks
3. html – Как (и почему) использовать display: table-cell (CSS) – Stack Overflow
4. Flexbox Froggy – Игра для изучения CSS flexbox
5. Понимаем Flexbox: Всё, что вам нужно знать
6. CSS Flexbox (Гибкий контейнер)
7. Наглядное руководство по свойствам CSS3 Flexbox | DigitalOcean