flex-direction: направление главной оси Flexbox

Назначение

flex-direction выбирает направление главной оси flex-контейнера: строку или колонку, при необходимости с обратным визуальным порядком.

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

row ориентируется на направление письма, column — на блочную ось. justify-content работает по главной оси, поэтому смена направления меняет смысл распределения свободного места.

Пример

<style>
.actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
</style>
<div class="actions"><button>Сохранить</button><button>Предпросмотр</button><button>Закрыть</button></div>

Что должно получиться

Кнопки расположены вертикально в исходном порядке HTML. Интервал gap относится к промежуткам между ними, а align-items удерживает их у начала поперечной оси.

Граница применения и частая ошибка

Варианты reverse не переставляют элементы в DOM и не гарантируют такой же порядок чтения или Tab. Не исправляйте логически неверный порядок одной визуальной перестановкой.

Самостоятельная проверка

Сравните row и column, затем пройдите кнопки клавишей Tab. Перед использованием reverse убедитесь, что зрительный порядок не противоречит последовательности действий.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.

Связанные материалы

• Каскад и специфичность
• Модель размеров
• Отладка стилей