html.okpython.net
Основы создания сайтов
CSS :: Свойство flex-direction
css-свойство flex-direction (от англ. flex direction – направление флекс-контейнера) задает направление главной оси флекс-контейнера, определяя порядок расположения флекс-элементов в нем. При этом следует иметь в виду, что направление главной оси зависит также и от значения атрибута dir у флекс-контейнера.
Характеристики
- Значение по умолчанию: row.
- Применяется: к флекс-контейнеру.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.flexDirection="value".
Синтаксис
flex-direction: row | row-reverse | column | column-reverse
Значения
- row – главная ось направлена горизонтально в направлении записи текста (используется по умолчанию). Следует помнить, что направление записи текста в элементе задается универсальным атрибутом dir и по умолчанию имеет значение ltr (т.е. слева направо), именно поэтому флекс-элементы по умолчанию также отображаются строкой слева направо в направлении от стороны main start к main end.
- row-reverse – главная ось также направлена горизонтально, но при этом стороны main start и main end флекс-контейнера располагаются в направлении противоположном направлению записи текста в контейнере, поэтому флекс-элементы отображаются в строку, но в обратном порядке.
- column – главная ось направлена вертикально сверху вниз, поэтому флекс-элементы отображаются колонкой сверху вниз в направлении от стороны main start к main end.
- column-reverse – главная ось направлена вертикально снизу вверх, поэтому флекс-элементы отображаются колонкой снизу вверх в направлении от стороны main start к main end.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex-direction
Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформляем родительские div'ы flex-элементов */ div{ display: flex; width: 250px; height: 150px; margin: auto; margin-top: 10px; background-color: #DFDFDF; border-radius: 5px; } /* Это общий стиль flex-элементов */ p, span{ width: 40px; padding: 10px; margin: auto; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; } /* Это класс для 1-го div'а */ .div_flex_1{ flex-direction: row; } /* Это класс для 2-го div'а */ .div_flex_2{ flex-direction: row-reverse; } /* Это класс для 3-го div'а */ .div_flex_3{ flex-direction: column; } /* Это класс для 4-го div'а */ .div_flex_4{ flex-direction: column-reverse; } </style> </head> <body> <div class="div_flex_1"> <p>1</p><span>2</span><p>3</p> </div> <div class="div_flex_2"> <p>1</p><span>2</span><p>3</p> </div> <div class="div_flex_3"> <p>1</p><span>2</span><p>3</p> </div> <div class="div_flex_4"> <p>1</p><span>2</span><p>3</p> </div> </body> </html>
Пример №1