Какие CSS свойства задать для flex-контейнера, чтобы расположить элементы по горизонтали?

Что проверяют

Вопрос на внимательность: знаете ли вы значения по умолчанию. Следом обычно спрашивают, почему элементы вылезают за контейнер или не хотят сжиматься.

Как отвечать

Достаточно одного свойства: display: flex. У flex-direction значение по умолчанию row, поэтому элементы и так встанут в строку. Писать flex-direction: row можно для явности, но это не обязательное условие. Строка идёт по направлению текста, при direction: rtl она начнётся справа.

Дальше покажите, что понимаете оси и умолчания:

• justify-content: распределение по главной оси, по умолчанию элементы прижаты к началу. Варианты center, space-between, space-around, space-evenly;
• align-items: выравнивание по поперечной оси, по умолчанию stretch, поэтому элементы тянутся на высоту строки;
• gap: расстояние между элементами без хаков с margin, во флексбоксе работает во всех актуальных браузерах;
• flex-wrap: по умолчанию nowrap, всё держится в одну строку, а wrap переносит лишнее вниз;
• flex у детей: по умолчанию 0 1 auto, то есть элементы не растягиваются, но сжимаются. flex: 1 раздаёт свободное место поровну.

Короткий пример, который закрывает вопрос: .row { display: flex; gap: 16px; align-items: center; }. Если контейнер должен сам вести себя как строчный элемент, используйте display: inline-flex.

Для доступности упомяните, что row-reverse и order меняют только визуальный порядок, а фокус с клавиатуры и экранные дикторы идут по DOM.

Где спотыкаются

Утверждают, что без flex-direction: row элементы встанут в колонку. Это выдаёт заучивание без понимания умолчаний.

Не знают про min-width: auto у флекс-элементов: длинное слово или широкая таблица не дают элементу сжаться, и строка вылезает за контейнер. Лечится min-width: 0 на элементе.

Путают оси: после смены направления на column свойство justify-content работает по вертикали, а align-items по горизонтали, и выравнивание неожиданно «ломается».