Что такое Flexbox?

Flexbox (Flexible Box Layout) — это одномерная модель макета в CSS, которая предназначена для распределения места между элементами в контейнере и мощных возможностей выравнивания. Она позволяет легко управлять размерами, порядком и выравниванием дочерних элементов (flex-элементов) внутри родительского контейнера (flex-контейнера), независимо от их исходного порядка или размеров.

Ключевые концепции Flexbox:

• Flex-контейнер: Элемент, для которого установлено display: flex или display: inline-flex. Именно в контейнере определяются правила макета для его прямых дочерних элементов.
• Flex-элементы: Прямые дочерние элементы flex-контейнера. К ним применяются свойства Flexbox, определяющие их поведение внутри контейнера.
• Основная ось (main axis): Ось, по которой располагаются flex-элементы. По умолчанию горизонтальная (слева направо), но может быть изменена свойством flex-direction.
• Поперечная ось (cross axis): Ось, перпендикулярная основной оси.
• Главное начало (main start) / Главный конец (main end): Начало и конец вдоль основной оси.
• Поперечное начало (cross start) / Поперечный конец (cross end): Начало и конец вдоль поперечной оси.

Основные свойства Flexbox для flex-контейнера:

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

Основные свойства Flexbox для flex-элементов:

• order: Определяет порядок отображения flex-элемента (по умолчанию 0).
• flex-grow: Коэффициент роста flex-элемента, определяющий, насколько он может увеличиться, чтобы заполнить доступное пространство.
• flex-shrink: Коэффициент сжатия flex-элемента, определяющий, насколько он может уменьшиться, чтобы избежать переполнения.
• flex-basis: Начальный размер flex-элемента до распределения свободного пространства.
• flex: Сокращение для flex-grow, flex-shrink и flex-basis.
• align-self: Переопределяет align-items для конкретного flex-элемента.

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

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-контейнером */
  justify-content: center; /* Выравниваем элементы по центру основной оси */
  align-items: center; /* Выравниваем элементы по центру поперечной оси */
  height: 200px; /* Для демонстрации выравнивания */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Основные преимущества Flexbox:

• Удобное выравнивание элементов по горизонтали и вертикали.
• Гибкое распределение пространства между элементами.
• Легкое изменение порядка элементов.
• Адаптивный дизайн без использования float и position.
• Хорошая поддержка в современных браузерах.