CSS Flexbox: выровнять элементы и переносить строки

Категория: CSS · Язык: CSS · Обновлено:

Flexbox выстраивает элементы в одном основном направлении и помогает выровнять их по горизонтали и вертикали. Включите display: flex, задайте gap для отступов и используйте justify-content по главной оси, а align-items — по поперечной.

Панель с равными отступами

CSS
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Перенести элементы на следующую строку

CSS
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.actions > * {
  flex: 0 1 auto;
}

flex-wrap: wrap разрешает перенос, а gap задаёт расстояние между элементами без лишних внешних отступов.

Свойство

За что отвечает

flex-direction

Направление главной оси

justify-content

Выравнивание по главной оси

align-items

Выравнивание по поперечной оси

flex-wrap

Перенос элементов

gap

Промежутки между элементами

Как выровнять блок по центру?

Для контейнера задайте display: flex; justify-content: center; align-items: center;. Контейнеру нужна высота, если выравнивание должно быть вертикальным.

Почему элементы не сжимаются?

У flex-элементов может быть min-width: auto, сохраняющий минимальный размер содержимого. Для длинного содержимого иногда требуется min-width: 0.