Инструмент

Flexbox-песочница

Меняйте свойства флекс-контейнера и отдельных элементов и сразу смотрите, как перестраивается раскладка. Главная и поперечная оси нарисованы на предпросмотре.

Внимание

Инструменту нужен JavaScript. Без него работают учебник и справочник.

Контейнер flex-direction flex-wrap justify-content align-items align-content

gap

8px

Элементы

Нажмите на элемент на предпросмотре, чтобы настроить его.

Элемент 1 flex-grow flex-shrink order flex-basis

flex-basis — в пикселях; пустое поле — auto.

align-self

главная ось — justify-content поперечная ось — align-items

Код

.container {
  display: flex;
  gap: 8px;
}

Главная ось идёт по горизонтали (→) — это задаёт flex-direction: row. Поперечная ось перпендикулярна ей (↓). По главной оси работает justify-content: элементы прижаты к началу главной оси. По поперечной — align-items: элементы растянуты на всю линию. Переноса нет (nowrap): если места не хватает, элементы сжимаются по flex-shrink.

По теме