Загрузите пресет центра. Он создаёт один элемент в row с justify-content: center и align-items: center. Первое правило центрирует по главной оси строки, второе — по поперечной. Элемент остаётся flex: 0 1 auto, поэтому сохраняет размер содержимого, а не растягивается.
Для центрирования нужно место по поперечной оси
У предпросмотра есть минимальная высота, поэтому центр по поперечной оси виден. В реальном контейнере высотой по содержимому нет лишнего вертикального места. Задавайте высоту или min-height только по требованиям дизайна: FlexWeave не переносит высоту предпросмотра в CSS.
Ожидаемые правила
Контейнер содержит display flex, row, nowrap, center для распределения и элементов и интервалы 16px. Правило элемента: flex: 0 1 auto, align-self: auto и order: 0. В HTML Item 1 встречается один раз в исходном порядке.
Проверьте реальный компонент
FlexWeave отображает проверенную визуальную модель текущим браузером, но не знает ваше содержимое, режим письма, фокусируемые элементы и диапазон ширин. Вставьте правила в реальный компонент, сохраните осмысленный порядок HTML и проверьте узкие экраны, масштаб, длинные переводы, клавиатуру и вспомогательные технологии. Обратное направление и order не подтверждают правильное чтение. Храните принятые CSS и HTML в системе контроля версий: капсула намеренно не сохраняет проект.