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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

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

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

CSS
Скопировать код
.flex-child {
  flex: none; /* "Я самодостаточен" */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS
Скопировать код
.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
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какое свойство нужно использовать, чтобы отключить выравнивание колонок по высоте в Flexbox?
1 / 5