Энциклопедия CSS: display: flex

CSS: display: flex

Тематические порталы

Портал CSS • Портал Веб-разработчиков

Свойство display: flex в CSS активирует режим Flexbox, который позволяет легко выравнивать и распределять элементы внутри контейнера, даже если их размеры неизвестны или динамически изменяются. Это один из самых мощных инструментов для создания адаптивных и сложных макетов.

Основные принципы Flexbox

Когда элементу задаётся display: flex, он становится flex-контейнером, а его непосредственные дочерние элементы становятся flex-элементами. Flexbox предоставляет несколько ключевых возможностей:

1. Выравнивание элементов по горизонтали и вертикали.
2. Управление пространством между элементами.
3. Поддержка адаптивного изменения размеров элементов.

Основные свойства Flexbox

Flexbox имеет свойства для контейнера и элементов:

Свойства контейнера

Эти свойства задаются элементу с display: flex:

• flex-direction: Определяет направление основного потока:
  • row (по умолчанию): Слева направо.
  • row-reverse: Справа налево.
  • column: Сверху вниз.
  • column-reverse: Снизу вверх.
• justify-content: Управляет горизонтальным выравниванием flex-элементов:
  • flex-start (по умолчанию): Все элементы выравниваются по началу.
  • flex-end: Выравнивание по концу.
  • center: Центрирование.
  • space-between: Равномерное распределение с равным интервалом между элементами.
  • space-around: Равные отступы вокруг элементов.
  • space-evenly: Равномерные отступы между и вокруг элементов.
• align-items: Выравнивает элементы по вертикальной оси:
  • stretch (по умолчанию): Элементы растягиваются по высоте контейнера.
  • flex-start: Выравнивание по верхнему краю.
  • flex-end: Выравнивание по нижнему краю.
  • center: Центрирование.
  • baseline: Выравнивание по базовой линии текста.
• align-content: Управляет вертикальным выравниванием нескольких строк (применяется, если элементы занимают несколько строк):
  • Значения аналогичны justify-content.

Свойства элементов

Эти свойства задаются отдельным дочерним элементам flex-контейнера:

• flex-grow: Определяет, насколько элемент может увеличиваться относительно других.
• flex-shrink: Определяет, насколько элемент может уменьшаться при недостатке места.
• flex-basis: Задаёт начальный размер элемента.
• align-self: Переопределяет значение align-items для конкретного элемента.

Пример использования Flexbox

HTML

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  border: 1px solid #000;
}

.flex-item {
  flex: 1;
  margin: 5px;
  padding: 10px;
  text-align: center;
  border: 1px solid blue;
  background-color: lightgray;
}

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

Объяснение

• Контейнер .flex-container использует свойства display: flex, justify-content: space-around и align-items: center для равномерного распределения элементов.
• Каждый .flex-item занимает равное пространство благодаря свойству flex: 1.

Преимущества Flexbox

• Простота выравнивания элементов даже в сложных макетах.
• Адаптивность: элементы автоматически подстраиваются под доступное пространство.
• Лёгкость в реализации центровки как горизонтально, так и вертикально.

Ограничения

• Flexbox лучше всего подходит для однострочных макетов. Для многострочных лучше использовать CSS Grid.
• Может быть сложно настроить поведение для элементов с разными размерами.

Совместимость с браузерами

Flexbox поддерживается всеми современными браузерами, однако для старых версий (например, Internet Explorer 10) могут потребоваться префиксы (-webkit-, -ms-).

Заключение

Flexbox — это мощный инструмент для выравнивания и управления элементами на веб-страницах. Его простота в использовании и гибкость делают его основным выбором для большинства современных адаптивных макетов.