html.okpython.net
Основы создания сайтов
CSS :: Свойство flex-flow
Сокращенное css-свойство flex-flow (от англ. flex flow – поток флекс-элементов) позволяет задать в одном объявлении значения свойств flex-direction и flex-wrap.
Характеристики
- Значение по умолчанию: row nowrap.
- Применяется: к флекс-элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.flexFlow="value".
Синтаксис
flex-flow: flex-direction || flex-wrap
Значения
В качестве значения свойство flex-flow принимает через пробел в любой последовательности значения свойств flex-direction и flex-wrap. Если указать только один параметр, второй примет значение по умолчанию.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex-flow
Подробнее о модуле 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: 20px; 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-flow: row wrap; } /* Это класс для 2-го div'а */ .div_flex_2{ flex-flow: wrap-reverse; } /* Это класс для 3-го div'а */ .div_flex_3{ flex-flow: column wrap; } /* Это класс для 4-го div'а */ .div_flex_4{ flex-flow: column wrap-reverse; } </style> </head> <body> <div class="div_flex_1"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> <div class="div_flex_2"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> <div class="div_flex_3"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> <div class="div_flex_4"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> </body> </html>
Пример №1