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