Flex wrap css: flex-wrap | CSS | WebReference
flex-wrap | CSS | WebReference
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
Краткая информация
Значение по умолчанию | nowrap |
---|---|
Наследуется | Нет |
Применяется | К флекс-контейнеру |
Анимируется | Нет |
Синтаксис
flex-wrap: nowrap | wrap | wrap-reverse
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- nowrap
- Флексы выстраиваются в одну линию.
- wrap
- Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
- wrap-reverse
- Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>flex-wrap</title>
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.flex-item {
padding: 20px;
background: #f0f0f0;
border-radius: 5px;
margin: 1rem;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li><img src=»image/aquaria1.jpg» alt=»»></li>
<li><img src=»image/aquaria2.jpg» alt=»»></li>
<li><img src=»image/aquaria3.jpg» alt=»»></li>
</ul>
</body>
</html>
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-wrap.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
Свойство flex-wrap | CSS справочник
CSS свойства
Определение и применение
CSS свойство flex-wrap определяет, будет ли флекс контейнер однострочным, или многострочным. По умолчанию контейнер является однострочным, для многострочных контейнеров допускается контролировать направление, в котором размещаются флекс элементы.
Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-wrap не окажет на такой элемент никакого эффекта.
Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:
Поддержка браузерами
CSS синтаксис:
flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";
JavaScript синтаксис:
object.style.flexWrap = "wrap-reverse"
Значения свойства
Значение | Описание |
---|---|
nowrap | Указывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию. |
wrap | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения). Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево. |
wrap-reverse | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS 3
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html> <html> <head> <title>Однострочные и многострочные флекс контейнеры</title> <style> .container { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: nowrap; /* для поддержки ранних версий браузеров */ flex-wrap: nowrap; /* указывает, что флекс элементы выстраиваются в одну строку(это значение по умолчанию) */ } .container2 { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: wrap; /* для поддержки ранних версий браузеров */ flex-wrap: wrap; /* указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) */ } .container3 { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: wrap-reverse; /* для поддержки ранних версий браузеров */ flex-wrap: wrap-reverse; /* по аналогии со значением wrap, но формирование строки идёт в обратном порядке */ } div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>) width: 40%; /* устанавливаем ширину блока */ height: 25px; /* устанавливаем высоту блока */ border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */ } </style> </head> <body> <h4>flex-wrap:nowrap;</h4> <div class = "container"> <div>A</div> <div>B</div> <div>C</div> </div> <h4>flex-wrap:wrap;</h4> <div class = "container2"> <div>A</div> <div>B</div> <div>C</div> </div> <h4>flex-wrap:wrap-reverse;</h4> <div class = "container3"> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html>
Результат примера:
flex-wrap | CSS справочник
Поддержка браузерами
11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство flex-wrap определяет будут ли flex-элементы выстраиваться в одну строку или возможно многострочное размещение. Если многострочное расположение разрешено, то свойство позволяет задавать и направление расположения flex-элементов.
Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-wrap будет проигнорировано.
Значение по умолчанию: | nowrap |
---|---|
Применяется: | к flex-контейнерам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.flexWrap=»nowrap»; |
Синтаксис
flex-wrap: nowrap|wrap|wrap-reverse;
Значения свойства
Значение | Описание |
---|---|
nowrap | Значение по умолчанию. Все flex-элементы располагаются на одной строке. |
wrap | Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места. |
wrap-reverse | Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места. Дополнительно flex-элементы начинают располагать снизу вверх, то есть если на нижней строке не хватает места, они переносятся на строку выше. |
Пример
#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: nowrap;
}
Изучаем Flexbox | Кабинет Веб-мастера
Технологии не стоят на месте и мир высоких технологий развивается очень быстро. Тяжело успевать за техническим прогрессом и быть в курсе всех изменений.
Сегодня мы будем изучать долгожданное нововведение всех вебмастеров — Flexbox-лейаут или гибкие блоки.
Этот модуль призван сделать более эффективным верстку при выравнивании и распределении свободного пространства между элементами в контейнере, даже если их размер неизвестен или меняется динамически.
Начнем разбираться по порядку.
Для просмотра этой статьи и использования этих технологий, используйте современные браузеры
Поддержка браузерами: Google Chrome 21+, Opera 12.1+, Mozilla FireFox 22+, IE 10+, Safari 3+, Android 2.1+, iOS 3.2+.
Создадим простую структуру:
<div> <div>100500</div> <div>2</div> <div>3</div> </div>
1 контейнер и 3 дочерних элемента. С этими элементами мы будем выполнять все манипуляции. Структура изменяться не будет, поэтому в дальнейшем буду приводить изменения только стилей css.
Итак, сейчас у нас все элемента блочные и без стилей все дочерние элементы будут располагаться друг под другом.
display:flex
Применяется к родительскому элементу. Определяет родительский элемент как блочный.
Поэтому добавим базовые стили, которые определят, что используемые нами элементы относятся к теме статьи:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
В результате мы получим вот такую картинку:
При этом контейнер будет занимать всю доступную ширину (так как свойство display:flex определяет элемент как блочный) — для примера, ограничил ширину — 760px, а дочерние элементы занимают ширину по содержимому.
Если мы зададим родителю свойство display:inline-flex, то это определит родителя как блок-инлайновый элемент (при этом результат не изменится), родитель будет занимать ширину по содержимому (а вести себя как display:inline-block).
По умолчанию, дочерние элементы располагаются у левого края. Но это можно изменить:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-direction:row-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
Теперь элементы располагаются справа-налево. И первый дочерний элемент стоит справа. (Если направление текста изменено для всех страницы на обратное — справа налево rtl, вместо ltr — то все свойства выравнивания — это и далее — работают наоборот).
flex-direction
Применяется к родительскому элементу. Устанавливает направление дочерних flex элементов.
Все доступные варианты выравнивания для свойства flex-direction:
- row (по умолчанию): слева направо для ltr, справа налево для rtl
- row-reverse: справа налево для ltr, слева направо для rtl
- column: аналогично row, сверху вниз
- column-reverse: аналогично row-reverse, снизу вверх
display:inline-flex
Применяется к родительскому элементу. Определяет родительский элемент как инлайн-блочный (аналог inline-block).
На картинке наглядно видна разница между display:flex и display:inline-flex на основе свойства flex-direction. Больше к этим свойствам обращаться не будем.
flex-wrap
Применяется к родительскому элементу. Определяет контейнер как однострочный или многострочный, а также направление расположения строк.
Все доступные варианты выравнивания для свойства flex-wrap:
- nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl
- wrap: многострочный / слева направо для ltr, справа налево для rtl
- wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl
Зададим стили для примера:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
Это свойство указывает, что если контейнеры не будут умещаться на экране, то они перенесутся на другую строку.
Применим свойство flex-wrap:wrap-reverse;:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
flex-flow
Применяется к родительскому элементу. Служит сокращением для flex-direction и flex-wrap.
Значение по умолчанию: flex-flow:row nowrap;
.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-flow:row nowrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
justify-content
Применяется к родительскому элементу. Определяет выравнивание дочерних элементов внутри родителя. Помогает распределить свободное пространство в случае, когда элементы строки не тянутся, либо достигли своего максимального размера.
Все возможные значения для свойства:
- flex-start (по умолчанию): элементы сдвигаются к началу строки
- flex-end: элементы сдвигаются к концу строки
- center: элементы выравниваются по центру строки
- space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
- space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки
Зададим свойства для выравнивания элементов по центру:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; justify-content:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }
align-items
Применяется к родительскому элементу. Выравнивает дочерние элементы по вертикали. Свойство работает аналогично justify-content, но перпендикулярно.
Все возможные значения для свойства:
- flex-start: граница cross-start для элементов располагается на позиции cross-start
- flex-end: граница cross-end для элементов располагается на позиции cross-end
- center: элементы выравниваются по центру поперечной оси
- baseline: элементы выравниваются по своей базовой линии
- stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)
Внимание! Для примера немного добавились стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:last-child { height:200px; }
align-content
Применяется к родительскому элементу. Свойство не работает с однострочным flexbox. Определяет выравнивание строк (аналогично свойству justify-content).
Все возможные значения свойства:
- flex-start: строки выравниваются относительно начала контейнера
- flex-end: строки выравниваются относительно конца контейнера
- center: строки выравниваются по центру контейнера
- space-between: строки распределяются равномерно (первая строка в начале строки, последняя — в конце)
- space-around: строки распределяются равномерно с равным расстоянием между собой
- stretch (по умолчанию): строки растягиваются, заполняя свободное пространство
Обновим стили для примера:
.parent { height:500px; /* организуем лишнее пространство */ display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-wrap:wrap; /* делаем flexbox многострочным */ align-content:space-around; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:100%; /* делаем перенос строк */ }
Это все свойства, которые применяются к родителю. Теперь разберем свойства, которые применяются к дочерним элементам.
order
Применяется к дочерним элементам. Определяет порядок расположения элементов (можно изменить исходный порядок расположения в контейнере).
Обновляем стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { order:3; }
Вуаля! Первый элемент стал последним.
flex-grow
Применяется к дочерним элементам. Принимает безразмерное значение, которое означает пропорцию, которую дочерний элемент занимает внутри родителя.
Если у всех дочерних элементов задано: flex-grow:1;, то они займут одинаковый размер (или 33,3333%). Если один из элементов будет иметь значение 2, то он будет занимать размер в 2 раза больше остальных.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-grow:1; } .child:first-child { flex-grow:2; }
Первый элемент занимает в 2 раза больше места, чем другие.
flex-shrink
Применяется к дочерним элементам. Определяет возможность элементов сжиматься при необходимости.
По умолчанию значение 1. Отрицательные числа не принимаются. 0 — элемент не сжимается.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:200px; flex-shrink:5; } .child:first-child { flex-shrink:1; }
Несмотря на то, что дочерние элементы имеют одинаковый размер, в примере 2 последних блока будут сжиматься в 5 раз быстрее первого.
flex-basis
Применяется к дочерним элементам. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере (что-то похожее на width).
По умолчанию значение default auto. Принимает значение ширины (px, em и другие).
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:1060px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-basis:200px; }
В представленном примере все блоки имеют одинаковую начальную ширину — 200px.
flex
Применяется к дочерним элементам. Сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры не обязательны.
Значения по умолчанию: 0 1 auto.
Обновим стили:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:none; }
В приведенном примере дочерние элементы имеют ширину по содержимому.
align-self
Применяется к дочерним элементам. Позволяет переопределить выравнивание, заданное в align-items для отдельных элементов.
Все возможные значения для свойства:
- flex-start: граница cross-start для элементов располагается на позиции cross-start
- flex-end: граница cross-end для элементов располагается на позиции cross-end
- center: элементы выравниваются по центру поперечной оси
- baseline: элементы выравниваются по своей базовой линии
- stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)
Обновим стили. Зададим другое выравнивание первому элементу:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; height:300px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { align-self:flex-start; }
В приведенном примере — первый блок находится в начале родительского, а второй и третий выравнены по центру.
Ну и в заключение приведу пример, в которой в строку будут стоят 3 блока. Первый блок будет 200px, сжиматься и растягиваться не будет. Остальные 2 блока будут занимать все оставшееся пространство, причем как растягиваться так и сжиматься. Без flexbox это сделать достаточно проблематично. Посмотрим на код css при использовании flexbox:
.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:1 200px; } .child:first-child { flex:0 0 200px; }
Вот и все! Обзорная экскурсия по flexbox закончена. Экспериментируйте и все получится!
Свойство flex-flow | CSS справочник
CSS свойства
Определение и применение
CSS свойство flex-flow позволяет в одном объявлении указать значения свойств flex-direction(задает направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера), и flex-wrap (определяет, будет ли флекс контейнер однострочным, или многострочным). До использования в работе свойства flex-flow, я рекомендую Вам ознакомиться с перечисленными свойствами по отдельности.
Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-flow не окажет на такой элемент никакого эффекта.
Поддержка браузерами
CSS синтаксис:
/* только направление */ flex-flow:"flex-direction"; /* однострочный, или многострочный */ flex-flow:"flex-wrap"; /* оба свойства в одном объявлении */ flex-flow:"flex-direction flex-wrap | initial | inherit";
JavaScript синтаксис:
object.style.flexFlow = "column wrap"
Значения свойства
Значение | Описание |
---|---|
flex-direction | Указывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера. Направление элементов формируется исходя из положения двух осей: главной оси контейнера и поперечной оси, которая всегда распологается перпендикулярно главной. Допустимые значения:
|
flex-wrap | Определяет, будет ли флекс контейнер однострочным или многострочным. Если в контейнере разрешена многострочность, то это свойство также позволяет контролировать направление, в котором размещаются флекс элементы. Допустимые значения:
|
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3
Наследуется
Нет.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html> <html
CSS свойство flex-wrap
Пример
При необходимости оберните гибкие предметы:
div {
дисплей: гибкий;
flex-wrap: пленка;
}
Попробуй сам »
Определение и использование
Свойство flex-wrap
указывает, должны ли гибкие элементы обертываться или нет.
Примечание: Если элементы не являются гибкими, свойство flex-wrap
не действует.
Значение по умолчанию: | nowrap |
---|---|
Унаследовано: | нет |
Анимируемое: | нет. Прочитать о animatable |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.flexWrap = «nowrap» Попробуй это |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -webkit- или -moz-, указывают первую версию, которая работала с префиксом.
Объект | |||||
---|---|---|---|---|---|
гибкая пленка | 29,0 21,0 -вебкит- | 11,0 | 28,0 18,0 -моз- | 9,0 6,1 -вебкит- | 17,0 |
Синтаксис CSS
Flex-wrap: nowrap | wrap | wrap-reverse | начальный | наследование;
Стоимость недвижимости
Значение | Описание | Играй |
---|---|---|
nowrap | Значение по умолчанию.Указывает, что гибкие элементы не будут обертываться | Играй » |
обертка | Указывает, что гибкие элементы будут при необходимости обернуты | Играй » |
обертка-реверс | Указывает, что гибкие элементы будут упакованы, если необходимо, в обратном порядке | Играй » |
начальный | Устанавливает для этого свойства значение по умолчанию.Читать про начальный | Играй » |
унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
Учебное пособие по CSS: CSS Flexible Box
Ссылка CSS: свойство flex
Ссылка CSS: свойство flex-flow
Ссылка CSS: свойство flex-direction
Ссылка CSS: свойство flex-basic
Ссылка CSS: свойство flex-grow
Ссылка CSS: свойство flex-shrink
Ссылка на HTML DOM: свойство flexWrap
.
html — CSS Flexbox: гибкий перенос одного div на две строки с раздельным ростом на каждой строке
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
Загрузка…
html — Перенос текста div Flexbox
Переполнение стека
- Около
Продукты
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
.