foundation

Flexbox

Используйте одномерный layout, оси, перенос, flex-basis, рост, сжатие, выравнивание и gap.

Flexbox распределяет элементы вдоль одной main axis и выравнивает по cross axis. Задайте `display: flex`, направление через `flex-direction`, размеры — shorthand `flex` (grow, shrink, basis).

					.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.toolbar__grow {
  flex: 1 1 auto;
  min-width: 0; /* сжатие ниже ширины контента */
}

`justify-content` — по main axis; `align-items` — по cross axis. `flex-wrap` даёт многострочные ряды. По умолчанию `min-width: auto` не даёт сжаться ниже контента — классическая ловушка на интервью с длинным текстом.

На интервью: оси, shorthand flex, почему элементы не сжимаются и когда лучше Grid.

Типовые ошибки: Flexbox для двумерных tracks; нет min-width: 0 у текстовых flex children.

Компромисс: простота на одной оси против попыток имитировать Grid вложенными flex-рядами.

Чеклист:

Явно выберите main axis.
Настройте basis и grow/shrink осознанно.
gap вместо margin-хаков.
min-width: 0, когда контент должен сжиматься.