Генератор и песочница Flexbox

Как пользоваться

1. В блоке «Контейнер» выберите flex-direction, flex-wrap, justify-content, align-items, align-content и gap. Количество элементов меняется кнопками «−» и «+» от 1 до 8.
2. Кликните по любому элементу в предпросмотре (или выберите его клавишами Tab и Enter) — откроются поля flex-grow, flex-shrink, flex-basis, align-self и order для этого элемента.
3. Следите за осями: justify-content работает вдоль главной оси, а align-items — вдоль поперечной; flex-direction меняет направление осей.
4. Нажмите «Копировать». В коде будет правило .container и правила .item:nth-child(N) только для тех элементов, у которых есть нестандартные значения.

Как это работает

Контейнер и элементы

Элемент с display: flex становится flex-контейнером, а его прямые потомки — flex-элементами. Общие правила задаёт контейнер (flex-direction, justify-content, align-items, gap), а поведением каждого элемента управляют его собственные свойства (flex-grow, flex-basis, align-self, order).

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

Главная и поперечная оси

При flex-direction: row главная ось идёт слева направо, а поперечная — сверху вниз; при column оси меняются местами. justify-content распределяет элементы вдоль главной оси (flex-start, center, space-between, space-evenly), а align-items выравнивает их вдоль поперечной. Значение align-items по умолчанию — stretch: элементы растягиваются на всю высоту (или ширину) контейнера по поперечной оси.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

flex-grow, flex-shrink и flex-basis

flex-basis — стартовый размер элемента (при auto берётся width или размер по содержимому). Если в контейнере остаётся свободное место, flex-grow делит его между элементами пропорционально; если места не хватает, flex-shrink сжимает элементы. Элемент с flex-grow: 0 не занимает свободное место, а с flex-shrink: 0 — не сжимается.

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

flex-wrap, gap и align-content

По умолчанию flex-wrap: nowrap держит все элементы в одной строке и при нехватке места сжимает их. Со значением wrap элементы переносятся на новые строки. Когда строк несколько, align-content решает, как эти строки распределяются внутри контейнера; в однострочном контейнере он ни на что не влияет. Для промежутков между элементами используйте gap вместо margin — по краям не остаётся лишних отступов.

align-self и order

align-self меняет выравнивание по поперечной оси только у одного элемента, не затрагивая остальные. order переставляет элементы визуально, не меняя HTML (по умолчанию 0, меньшее значение идёт раньше). Помните: order влияет только на внешний вид, а порядок Tab и чтение скринридером остаются по HTML.

.item:nth-child(2) {
  align-self: flex-end;
  order: -1;
}

Частые вопросы