flex-direction
Направление главной оси flex-контейнера: элементы в ряд или в столбик.
Синтаксис
flex-direction: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| row | keyword | В ряд, по направлению текста (по умолчанию). |
| column | keyword | В столбик, сверху вниз. |
| row-reverse | column-reverse | keyword | То же в обратном порядке. |
Примеры
Ряд, столбик и обратный ряд:
<style>
.box { display: flex; gap: 6px; margin-bottom: 8px; }
.box div { padding: 6px 12px; background: gold; }
</style>
<div class="box"><div>1</div><div>2</div><div>3</div></div>
<div class="box" style="flex-direction: column;"><div>1</div><div>2</div><div>3</div></div>
<div class="box" style="flex-direction: row-reverse;"><div>1</div><div>2</div><div>3</div></div>Примечания
При column justify-content работает по вертикали, а align-items — по горизонтали: они всегда следуют за главной осью. Обратные значения меняют только видимый порядок: фокус клавиатуры всё равно идёт по разметке.
См. также
- flex-wrap — Могут ли flex-элементы переноситься на новые строки.
- justify-content — Распределяет элементы вдоль главной оси flex- или grid-контейнера.
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
Вопросы и ответы по теме
В учебнике
- Flexbox — Раскладка элементов в ряд или колонку с помощью flexbox — оси, направление, промежутки, выравнивание и перенос.