Flex

Flex — примитив раскладки: div с display: flex, у которого основные свойства флексбокса вынесены в пропсы. Нужен там, где раскладка одноразовая и заводить под неё CSS-модуль незачем — ряд кнопок в шапке, колонка полей формы, строка с иконкой и текстом.

Своих отступов, фона и размеров у компонента нет: он занимает ширину родителя, остальное задаёт хост.

gap принимает ступень шкалы отступов — gap="2x" разворачивается в var(--space-2x). Шкала закрытая: ступени от 0-5x до 12x подсказывает автокомплит, а значение вне шкалы не скомпилируется. Разовое исключение задаёт хост — style={{ gap: "13px" }} или свой класс.

Набор пропсов намеренно короткий: тут только то, что описывает раскладку самого контейнера. Поведение контейнера внутри родителя (flex-grow, flex-basis), inline-flex и всё остальное CSS — через className.

Адаптивных значений у самих пропсов нет, но раскладка по брейкпоинтам делается обычным CSS-модулем: значения пропсов уезжают в CSS-переменные и применяются правилом с нулевой специфичностью, поэтому переданный className перебивает их внутри медиазапроса без !important — @media (width >= 900px) { .toolbar { flex-direction: row } }. Перебивать нужно само свойство, а не переменную: инлайновая --flex-direction выигрывает у любого класса. Хостовый style тоже перебивает пропсы — это запасной выход для значения вне шкалы. className дописывается к базовому классу и display не затирает.

Для фиксированной раскладки «слева — по центру — справа» есть готовый Triplet: в нём центр стоит ровно посередине независимо от ширины боковых слотов, чего justify="space-between" не даёт.

direction="column" разворачивает главную ось вертикально: gap начинает работать как вертикальный отступ, а align — как горизонтальное выравнивание. Так собираются столбцы полей и списки карточек.

align работает по поперечной оси: по умолчанию элементы растягиваются на высоту самого высокого, а align="center" ставит их по центру. justify — по главной. Оба принимают любые CSS-значения, включая space-between и space-around.

wrap="wrap" разрешает элементам переезжать на новую строку, когда они перестают помещаться в ширину. gap при этом работает на обе оси — между строками остаётся такой же отступ. Если отступы по осям нужны разные, вместо gap берутся rowGap и columnGap.