Разбираемся с обёртыванием Flex элементов — CSS
Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства flex-direction (flex-направление) в значение row (строки) или создавая новые столбцы, устанавливая свойство flex-direction в значение column (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию CSS Grid Layout вместо флекс-боксов.
Значение по умолчанию свойства flex-wrap равняется nowrap. Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство wrap, или использовать сокращённую запись свойства flex-flow со значениями row wrap или column wrap соответственно для строк и столбцов.
Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с flex-basis равным 160px и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.
То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.
Перенос работает, что логично ожидать, и в паре со свойством flex-direction. Если flex-direction установлен в row-reverse, тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.
Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям — строки не будут заполняться вверх!
Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.
В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.
Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки — Grid Layout.
Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.
В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение — либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите — используйте Grid.
Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex — либо задав значение параметру flex-basis как auto — вы можете создать впечатление двухмерного макета.
Вы можете посмотреть, как это работает на примере ниже.
Здесь я установил flex-grow и flex-shrink на 0, чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.
Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.
При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации Box Alignment module. В будущем мы сможем просто использовать row-gap и column-gap для флексбоксов так же, как мы это делаем для CSS Grid макетов.
Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.
Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.
В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра visibility: collapse на элементе. Смотрим документацию MDN для параметра visibility. Спецификация описывает поведение так:
“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент.
Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую «распорку», которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту «виляния» всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” — Сворачивание элементов
Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую «распорку», которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту «виляния» всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” — Сворачивание элементовПонимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.
В следующем живом примере у нас показан флекс-контейнер со параметров «перенос» в состоянии «не переносить». Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую «распорку», которая удерживает ту высоту, которая позволит показать этот элемент. Если вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.
Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.
Когда вы работаете с многострочным флекс-контейнером, вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.
Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.
Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свёрнутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.
Если это вызывает проблемы для вашего макета, возможно вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.
Разница между
visibility: hidden и display: noneКогда вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы.
На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.
Свойство 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 | Указывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера. Направление элементов формируется исходя из положения двух осей: главной оси контейнера и поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию). Для значения rtl отображается зеркально. Допустимые значения:
|
| flex-wrap | Определяет, будет ли флекс контейнер однострочным или многострочным. Если в контейнере разрешена многострочность, то это свойство также позволяет контролировать направление, в котором размещаются флекс элементы. Допустимые значения:
|
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования свойства flex-flow</title> <style> .
container {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-flow: wrap-reverse; /* для поддержки ранних версий браузеров */
flex-flow: row nowrap; /* флекс элементы отображаются горизонтально, в виде строки (однострочный контейнер) */
}
.container2 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-flow: wrap-reverse; /* для поддержки ранних версий браузеров */
flex-flow: row-reverse wrap-reverse; /* флекс элементы отображаются горизонтально, в виде строки, но формирование строки идёт в обратном направлении, при этом контейнер является многострочным, в котором формирование строки идёт в обратном направлении */
}
.container3 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-flow: wrap-reverse; /* для поддержки ранних версий браузеров */
flex-flow: row-reverse wrap; /* флекс элементы отображаются горизонтально, в виде строки, но формирование строки идёт в обратном направлении при этом контейнер является многострочным */
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 40%; /* устанавливаем ширину блока */
height: 25px; /* устанавливаем высоту блока */
border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */
}
</style>
</head>
<body>
<h4>flex-flow : row nowrap;</h4>
<div class = "container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h4>flex-flow : row-reverse wrap-reverse;</h4>
<div class = "container2">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h4>flex-flow : row-reverse wrap;</h4>
<div class = "container3">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
Результат примера:
Пример использования свойства flex-flow(позволяет в одном объявлении указать значения свойств flex-direction и flex-wrap).
CSS свойстваflex-flow:row-reverse wrap-reverse в обратном порядке html и css
У меня есть контент, и я хочу, чтобы они были в строке-реверсе и обертке-реверсе, но в обратном порядке. Вот код:
.a {
height: 200px;
width: 520px;
padding: 5px 5px 5px 10px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
background-color: black;
}
.b {
min-width: 120px;
height: 90px;
text-align: center;
line-height: 90px;
margin-right: 5px;
background-color: aquamarine;
}<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Порядок должен быть изменен.
Пожалуйста, ответьте на этот вопрос, не используя свойство ‘order’.
Что-то вроде этого изображения(извините за плохую правку):
Пожалуйста, смотрите сначала вывод кода, а затем изображение.
html css flexboxПоделиться Источник Abu Taha 28 мая 2018 в 08:17
2 ответа
- Flex-wrap:wrap-reverse в пограничном
В следующем примере элементы flex начинают течь из верхнего правого угла обертки: div { outline: 1px solid teal; } #wrap { width: 400px; height: 200px; display: flex; flex-direction: column; flex-wrap: wrap-reverse; } #wrap div { width: 50px; height: 50px; } <div id=wrap>…
- Мой класс flex wrap не применяется к элементу div
У меня мало проблем с Flex wrap, мой код выглядит так: <!DOCTYPE html> <html> <head> <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css> <script defer src=https://use.
fontawesome.com/releases/v5.3.1/js/all.js></script>…
fontawesome.com/releases/v5.3.1/js/all.js></script>…
1
Мы можем использовать количественные запросы для реализации этого макета ( не требуется js! )
ul {
list-style: none;
min-height: 90px;
width: 500px;
padding: 5px;
background-color: black;
display: flex;
flex-wrap: wrap;
}
li {
display: inline-block;
min-width: 120px;
height: 90px;
text-align: center;
line-height: 90px;
margin-right: 5px;
margin-bottom: 5px;
background-color: aquamarine;
}
li:nth-last-child(4n + 3):first-child {
margin-left: 125px;
background-color: pink;
}
li:nth-last-child(4n + 2):first-child {
margin-left: 250px;
background-color: blue;
}
li:nth-last-child(4n + 1):first-child {
margin-left: 375px;
background-color: green;
}
li:nth-last-child(4n):first-child {
background-color: purple;
}<ul>
<li>1</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>Требуемая здесь компоновка по существу сводится к обычной четырехколоночной компоновке слева направо с отступом первого элемента в зависимости от количества элементов в контейнере.
Когда есть 4n элементов (4, 8, 12 и т.д.) — отступ не требуется.
Когда есть 4n + 1 элементов (1, 5, 9 и т. д.) — требуется отступ из трех элементов.
Когда есть 4n + 2 элемента (2, 6, 10 и т. д.) — требуется отступ из двух элементов.
Когда есть 4n + 3 элемента (3, 7, 11 и т. д.) — требуется отступ из одного элемента.
li:nth-last-child(4n + 3):first-child {
margin-left: 125px; /* one-item indentation */
}
li:nth-last-child(4n + 2):first-child {
margin-left: 250px; /* two-item indentation */
}
li:nth-last-child(4n + 1):first-child {
margin-left: 375px; /* three-item indentation */
}
li:nth-last-child(4n):first-child {
/* no indentation */
}
Чтобы понять это, давайте воспользуемся примером OP:
Скажем, есть 6 пунктов. Нам нужно применить отступ из двух элементов к первому элементу.
Селектор для этого будет следующим:
li:nth-last-child(4n + 2):first-child {
margin-left: 250px; /* 250 = 2 * 120 (item width) + 2 * 5px gap */
}
Интересный бит-это :nth-last-child(4n + 2):first-child , что означает:
— выберите первого ребенка, если это также 4n + 2 ребенка от последнего ребенка.
Поделиться Danield 28 мая 2018 в 12:05
0
Возможный способ сделать это-использовать JS для вычисления поля, которое Первый элемент должен иметь слева, используя модуль, как в приведенном ниже фрагменте кода.
const offset = document.querySelectorAll('.a .b').length%4;
const width = 120 + 5; //min-height + margin, it's probably better to calculate this value.
document.querySelector('.a .b').style.marginLeft = `${width*offset}px`;.a {
height: 200px;
width: 520px;
padding: 5px 5px 5px 10px;
display: flex;
flex-wrap: wrap;
background-color: black;
}
.b {
min-width: 120px;
height: 90px;
text-align: center;
line-height: 90px;
margin-right: 5px;
background-color: aquamarine;
}<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Поделиться Luuuud 28 мая 2018 в 11:46
Похожие вопросы:
reverse() не работает на литерале Python?
Почему это не работает в Python? >>> print [0,1,0,1,1,0,1,1,1,0,1,1,1,1,0].
reverse() None Я ожидал получить список в обратном порядке.
Печать строки в обратном порядке
Я пытаюсь напечатать строку в обратном порядке. hello world должно получиться как: dlrow olleh Но результат показывает только обратную сторону первого слова. olleh Есть мысли? import…
Используя команду reverse() в Java?
Хорошо. Я просмотрел, как сделать палиндромы, и похоже, что использование метода reverse() кажется мне лучшим выбором. Однако в моем коде я столкнулся с ошибкой, которую не понимаю. import…
Flex-wrap:wrap-reverse в пограничном
В следующем примере элементы flex начинают течь из верхнего правого угла обертки: div { outline: 1px solid teal; } #wrap { width: 400px; height: 200px; display: flex; flex-direction: column;…
Мой класс flex wrap не применяется к элементу div
У меня мало проблем с Flex wrap, мой код выглядит так: <!DOCTYPE html> <html> <head> <link rel=stylesheet href=https://cdn.
jsdelivr.net/npm/[email protected]/css/bulma.min.css>…
список в обратном порядке python
Как я должен исправить этот код, чтобы получить список, который находится в обратном порядке последовательности s? def reverse(s): Return a list that is the reverse of sequence s. >>>…
Можете ли вы использовать wrap-reverse flexbox для реверса серии divs в сетке, но при этом иметь полный верхний ряд?
Вот простой пример моей проблемы. https://codepen.io/yonatanmk/pen/NMRmLq У меня есть серия дивов, которые я хотел бы отобразить в сетке из 4 столбцов, но в обратном порядке, начиная с Санта-кота в…
Flex wrap-реверс с нормальным порядком содержимого?
У меня есть три коробки, которые я хотел бы поместить в различные комбинации в контейнер. Коробка иногда будет присутствовать в комбинации, иногда нет. Если все три коробки находятся в контейнере,…
Почему `animation-direction: reverse` не работает для моей анимации ключевого кадра CSS?
Я пытаюсь использовать animation-direction: reverse для рефакторинга моей анимации ключевого кадра CSS. У меня есть контейнер div, при нажатии на который будет переключаться класс active на него…
Как отсортировать список строк в обратном порядке без использования параметра reverse=True?
Я хочу отсортировать список строк в обратном порядке, например: my_list = [‘aaa’, ‘bbb’, ‘ccc’] ожидаемый результат: [‘ccc’, ‘bbb’, ‘aaa’] Я не хочу использовать sorted(my_list, reverse=True) ,…
flex-flow. Порядок элементов | HTML и CSS с примерами кода
flex-flow
Свойство flex-flow позволяет установить значения сразу для обоих свойств flex-direction и flex-wrap. Оно имеет следующий формальный синтаксис:
flex-flow: [flex-direction] [flex-wrap];
Причем второе свойство — flex-wrap можно в принципе опустить, тогда для него будет использоваться значение по умолчанию — nowrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border: solid 0.25em #000;
height: 8.25em;
flex-flow: row wrap;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.5em;
color: white;
opacity: 0.8;
}
.color1 {
background-color: #675ba7;
}
.color2 {
background-color: #9bc850;
}
.color3 {
background-color: #a62e5c;
}
.color4 {
background-color: #2a9fbc;
}
.color5 {
background-color: #f15b2a;
}
</style>
</head>
<body>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
<div>Flex Item 5</div>
</div>
</body>
</html>
Свойство order
Свойство order позволяет установить группу для flex-элемента, позволяя тем самым переопределить его позицию внутри flex-контейнера. В качестве значения свойство принимает числовой порядок группы. К одной группе может принадлежать несколько элементов.
Например, элементы в группе 0 располагаются перед элементами с группой 1, а элементы с группой 1 располагаются перед элементами с группой 2 и так далее.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
text-align: center;
font-size: 1em;
padding: 1.5em;
color: white;
opacity: 0.8;
}
.group1 {
order: -1;
}
.group2 {
order: 1;
}
.color1 {
background-color: #675ba7;
}
.color2 {
background-color: #9bc850;
}
.color3 {
background-color: #a62e5c;
}
.color4 {
background-color: #2a9fbc;
}
.color5 {
background-color: #f15b2a;
}
</style>
</head>
<body>
<div>
<div>Flex Item 1</div>
<div>Flex Item 2</div>
<div>Flex Item 3</div>
<div>Flex Item 4</div>
<div>Flex Item 5</div>
</div>
</body>
</html>
В данном случае определены 3 группы. Первый отображается последний элемент, так как он имеет группу -1:
По умолчанию если у элементов явным образом не указано свойство order, то оно имеет значение 0. И последними в данном случае отображаются второй и третий элемент, так как у них свойство order равно 1.
См. также
CSS flex flow
Пример
Чтобы гибкие элементы отображались в обратном порядке, и при необходимости обтекания:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
}
Определение и использование
Свойство flex-flow является сокращенным свойством для следующих свойств:
Примечание: Если элементы не являются гибкими элементами, свойство flex-flow не имеет эффекта.
| Значение по умолчанию: | row nowrap |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.flexFlow=»column nowrap» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
Синтаксис CSS
flex-flow: flex-direction flex-wrap|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| flex-direction | Возможные значения: Строки Значение по умолчанию — «Row». Указание направления гибких элементов | |
| flex-wrap | Возможные значения: Nowrap По умолчанию используется значение «Unwrap». Указание, следует ли обернуть гибкие элементы | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex Свойство
CSS Справка: flex-direction Свойство
CSS Справка: flex-wrap Свойство
CSS Справка: flex-basis Свойство
CSS Справка: flex-grow Свойство
CSS Справка: flex-shrink Свойство
HTML DOM Справочник: flexFlow Свойство
CSS свойство flex-flow
Свойство flex-flow — сокращение для свойств flex-wrap и flex-direction.
Свойство flex-flow является частью модуля макета гибкого контейнера.
Если нет гибких элементов, свойство flex-flow не будет иметь эффекта.
Свойство flex-flow используется вместе с расширением -Webkit- для Safari, Google Chrome и Opera.
Синтаксис¶
flex-flow: flex-direction | flex-wrap | initial | inherit;Когда устанавливаем flex-flow: row wrap, это означает, что первое значение указывает свойство flex-direction, а второе — свойство flex-wrap.
-webkit-flex-flow: row wrap ;
flex-flow: row wrap;Следующий код является таким же, как предыдущий:
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;Пример¶
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap ;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h3>Пример свойства flex-flow</h3>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>Пример со значениями «wrap-reverse» и «column»:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
color:#ffffff;
text-align:right;
display: flex;
-webkit-flex-flow: column wrap-reverse;
flex-flow: column wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h3>Пример свойства flex-flow</h3>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>Значения¶
flex-flow | Справочник CSS | schoolsw3.com
Пример
Сделать отображение гибких элементов в обратном порядке и при необходимости оберните:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
display: flex;
flex-flow: row-reverse wrap;
}
Определение и использование
Свойство flex-flow — это сокращенное свойство для:
Примечание: Если элемент не является гибким элементом, то свойство flex-flow не имеет никакого эффекта.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit- или -moz- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| flex-flow | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
CSS Синтаксис
flex-flow: flex-direction flex-wrap|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| flex-direction | Возможное значение: row По умолчанию значение «row». Указание направления гибких элементов | Воспроизвести » |
| flex-wrap | Возможное значение: nowrap По умолчанию значение «nowrap». Указание того, должны ли быть гибкие элементы обернуты или нет | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Связанные страницы
CSS Учебник: CSS Гибкий бокс
CSS Справочник: Свойство flex
CSS Справочник: Свойство flex-direction
CSS Справочник: Свойство flex-wrap
CSS Справочник: Свойство flex-basis
CSS Справочник: Свойство flex-grow
CSS Справочник: Свойство flex-shrink
HTML DOM Справочник: Свойство flexFlow
CSS свойство flex-flow
Пример
Сделайте отображение гибких элементов в обратном порядке и при необходимости оберните:
div {
дисплей: гибкий;
flex-flow: обертывание в обратном направлении;
}
Определение и использование
Свойство flex-flow является сокращенным свойством для:
Примечание: Если элементы не являются гибкими, свойство flex-flow не действует.
| Значение по умолчанию: | ряд nowrap |
|---|---|
| Унаследовано: | нет |
| Анимируемое: | нет. Прочитать о animatable |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.flexFlow = «столбец nowrap» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -webkit- или -moz- указывают первую версию, работавшую с префиксом.
| Объект | |||||
|---|---|---|---|---|---|
| гибкий поток | 29,0 21,0 -вебкит- | 11,0 | 28,0 18,0 -моз- | 9,0 6,1 -webkit- | 17,0 |
Синтаксис CSS
flex-flow: flex-direction flex-wrap | начальный | наследование;
Стоимость недвижимости
| Значение | Описание | Играй |
|---|---|---|
| изгиб | Возможные значения: строка Значение по умолчанию — «строка». Указание направления гибких элементов | Играй » |
| гибкая пленка | Возможные значения: nowrap Значение по умолчанию — nowrap. Указание, следует ли оборачивать гибкие элементы | Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию.Читать про начальный | Играй » |
| унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
Учебное пособие по CSS: CSS Flexible Box
Ссылка CSS: свойство flex
Ссылка CSS: свойство flex-direction
Ссылка CSS: свойство flex-wrap
Ссылка CSS: свойство flex-basic
Ссылка CSS: свойство flex-grow
Ссылка CSS: свойство flex-shrink
Ссылка на HTML DOM: свойство flexFlow
гибкая пленка | CSS-уловки
Свойство flex-wrap является подсвойством модуля «Гибкая компоновка блока».
Он определяет, будут ли гибкие элементы размещаться в одной строке или могут быть объединены в несколько строк. Если установлено несколько линий, он также определяет поперечную ось, которая определяет направление, в котором укладываются новые линии.
Напоминание: поперечная ось — это ось, перпендикулярная главной оси. Его направление зависит от направления главной оси.
Свойство flex-wrap принимает 3 различных значения:
-
nowrap( по умолчанию ): однострочный, который может вызвать переполнение контейнера -
wrap: многострочный, направление определяетсяflex-direction -
wrap-reverse: многострочный, противоположный направлению, определенномуflex-direction
Синтаксис
гибкая пленка: nowrap | упаковка | обертка-реверс
.flex-container {
flex-wrap: обертка;
} Демо
В следующей демонстрации:
- Красный список установлен на
nowrap - Желтый список установлен на
wrap - Для синего списка задано значение
с перемоткой назад
Примечание: для flex-direction установлено значение по умолчанию: строка .
См. Демонстрацию Pen Flex-wrap: CSS-Tricks (@ css-tricks) на CodePen.
Сопутствующие объекты
Прочие ресурсы
Поддержка браузера
Настольный компьютер
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Мобильный / планшет 9027
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 90 | 87 | 4.4 | 7,0-7,1 * |
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).
CSS | Свойство flex-flow — GeeksforGeeks
CSS | Свойство flex-flow
Свойство flex-flow является подсвойством модуля гибкого макета блока, а также сокращенным свойством для flex-wrap и flex-direction.
Примечание: Свойство flex бесполезно, если элемент не является гибким элементом.
Синтаксис:
flex-flow: flex-direction flex-wrap;
Значения свойства flex-flow:
- row nowrap: Расположение строки совпадает с направлением текста, а значение wrap-flex по умолчанию — nowrap. Он используется, чтобы указать, что у элемента нет обертки. Он заставляет элементы обтекать отдельные строки.
Синтаксис:
flex-flow: row nowrap;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: ряд nowrap;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Flex-flow: row nowraph4><divid="main"><divstyle="background-color: # 009900;"> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- row-reverse nowrap: Он упорядочивает строку, противоположную направлению текста, а значение wrap-flex по умолчанию - nowrap.Он используется, чтобы указать, что у элемента нет обертки. Он заставляет элементы обтекать отдельные строки.
Синтаксис:flex-flow: row-reverse nowrap;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: row-reverse nowrap;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: ряд-обратный nowraph4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- столбец nowrap: то же, что и строка, но сверху вниз, а значение wrap-flex по умолчанию - nowrap.Он используется, чтобы указать, что у элемента нет обертки. Он заставляет элементы обтекать отдельные строки.
Синтаксис:flex-flow: column nowrap;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: колонка nowrap;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: колонка nowraph4><divid="main"><divstyle="background-color: # 009900;"> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- column-reverse nowrap: То же, что и row-reverse сверху вниз, а значение wrap-flex по умолчанию - nowrap.Он используется, чтобы указать, что у элемента нет обертки. Он заставляет элементы обтекать отдельные строки.
Синтаксис:flex-flow: column-reverse nowrap;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: колонка-обратный поток;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: колонка-обратный nowraph4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- перенос строки: Он упорядочивает строку так же, как направление текста, а свойство переноса используется для разбиения гибкого элемента на несколько строк.Он заставляет гибкие элементы переноситься на несколько строк в соответствии с шириной гибких элементов
Синтаксис:flex-flow: перенос строк;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: обертывание строк;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус><h2> GeeksforGeeksh2><h4> Гибкий поток: перенос строкh4><divid="main"><divstyle="background-color: # 009900;"> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- row-reverse wrap: Он упорядочивает строку, противоположную направлению текста, а свойство wrap используется для обращения потока гибких элементов при их переносе к новым строкам.
Синтаксис:flex-flow: перенос строки в обратном направлении;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: ряд-обратное обертывание;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: ряд-обратная упаковкаh4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- перенос столбца: Он упорядочивает строку так же, как строка, но сверху вниз, а свойство переноса используется для обращения потока гибких элементов, когда они переносить на новые строки.
Синтаксис:flex-flow: перенос столбца;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: обертка колонки;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: обертывание колонкиh4><divid="main"><divstyle="background-color: # 009900;"> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- обратный перенос столбца: Он упорядочивает строку так же, как и обратную строку сверху вниз.и свойство wrap используется для изменения потока гибких элементов, когда они переносятся на новые строки.
Синтаксис:flex-flow: обратный перенос столбца;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: обратное обертывание колонки;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>головка><корпус><h2> GeeksforGeeksh2><h4> Гибкий поток: обратное обертывание колонкиh4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- row-wrap-reverse: Он упорядочивает строку так же, как направление текста и свойство wrap-reverse Это свойство используется для обращения потока гибкого элементы, когда они переносятся на новые строки.
Синтаксис:flex-flow: обратный перенос строки;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: обертывание строк в обратном направлении;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: обертывание строк-обратноеh4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- row-reverse wrap-reverse: Он упорядочивает строку в противоположном направлении текста и свойство переноса-обратное. гибкие элементы, когда они переносятся на новые строки.
Синтаксис:flex-flow: row-reverse wrap-reverse;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;гибкий поток: ряд-обратный обертывание-обратное;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: ряд-обратное обертывание-обратноеh4><divid="main"><divstyle="цвет фона: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- перенастройка столбца в обратном направлении: Он упорядочивает строку так же, как строку, но сверху вниз.и свойство wrap-reverse. Это свойство используется для изменения направления потока гибких элементов при переносе на новые строки.
Синтаксис:flex-flow: обратный перенос столбца;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: обертывание колонки с обратным ходом;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус
6><h2> GeeksforGeeksh2><h4> Гибкий поток: обертывание колонки-реверсh4><divid="main"><divstyle="background-color: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
- column-reverse wrap-reverse: Он упорядочивает строку так же, как row-reverse сверху вниз и свойство wrap-reverse Это свойство используется для обратный поток гибких элементов, когда они переносятся на новые строки.
Синтаксис:гибкий поток: обратный столбец обратный перенос;
Пример:
<head><flex title flow свойствоtitle><style>#main {width: 400px;высота: 300 пикселей;граница: сплошной черный цвет 2 пикселя;дисплей: гибкий;flex-flow: колонка-обратное обертывание-обратное;}#main div {width: 100px;высота: 50 пикселей;}h2 {цвет: # 009900;font-size: 42px;левое поле: 50 пикселей;}h4 {верхнее поле: -20 пикселей;левое поле: 50 пикселей;}стиль>голова><корпус><h2> GeeksforGeeksh2><h4> Гибкий поток: колонка-обратное обертывание-обратноеh4><divid="main"><divstyle="цвет фона: # 009900; "> 1div><divstyle="background-color: # 00cc99;"> 2div><divstyle="background-color: # 0066ff;"> 3div><divstyle="background-color: # 66ffff;"> 4div><divstyle="background-color: # 660066;"> 5div><divstyle="background-color: # 663300;"> 6div>div>корпус>html>Вывод:
Поддерживаемый браузер:
- Google Chrome 29.0
- Internet Explorer 11.0
- Mozila Firefox 28.0
- Safari 9.0
- Opera 17.0
CSS flex-flow Свойство
Свойство flex-flow считается сокращенным свойством для flex-wrap и flex-direction характеристики.
Это свойство является одним из свойств CSS3. Это часть модуля Flexible Box Layout.
Если нет гибких элементов, свойство flex-flow не будет иметь никакого эффекта.
Свойство flex-flow используется с расширением -Webkit- для таких браузеров, как Safari, Google Chrome и Opera.
Синтаксис¶
flex-flow: flex-direction | гибкая пленка | начальная | наследовать; Когда мы устанавливаем flex-flow: row wrap, это означает, что первое значение определяет flex-direction, а второе определяет свойство flex-wrap.
-webkit-flex-flow: перенос строк;
flex-flow: перенос строк; Следующий код совпадает с кодом выше.
-webkit-flex-direction: row;
flex-direction: ряд;
-webkit-flex-wrap: обертка;
flex-wrap: обертка; Пример свойства flex-flow со значениями «row» и «wrap»: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
дисплей: гибкий;
-webkit-flex-flow: перенос строк;
flex-flow: перенос строк;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Пример свойства flex-flow со значениями« wrap-reverse »и« column »: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
цвет: #ffffff;
выравнивание текста: вправо;
дисплей: гибкий;
-webkit-flex-flow: обратный перенос столбца;
flex-flow: оборачивание колонки в обратном направлении;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Пример свойства flex-flow со значениями« row »и« nowrap »: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
дисплей: гибкий;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Результат¶
Пример свойства flex-flow со значениями« row-reverse »и« nowrap »: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
дисплей: гибкий;
-webkit-flex-flow: row-reverse nowrap;
flex-flow: row-reverse nowrap;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Пример свойства flex-flow со значениями« column »и« nowrap »: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
цвет: #ffffff;
выравнивание текста: вправо;
дисплей: гибкий;
-webkit-flex-flow: столбец nowrap;
flex-flow: колонка nowrap;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Пример свойства flex-flow со значениями« column-reverse »и« nowrap »: ¶
Название документа
<стиль>
.пример {
ширина: 200 пикселей;
высота: 200 пикселей;
граница: 1px solid # c3c3c3;
дисплей: -webkit-flex;
цвет: #ffffff;
выравнивание текста: вправо;
дисплей: гибкий;
-webkit-flex-flow: обратный столбец nowrap;
гибкий поток: обратный столбец nowrap;
}
.example div {
ширина: 50 пикселей;
высота: 50 пикселей;
}
Пример свойства Flex-flow
А
Б
В
D
E
F
Попробуйте сами »Значения¶
flex-flow: row-reverse wrap-reverse в обратном порядке html и css
Мы можем использовать Quantity Queries для реализации этого макета ( js не требуется! )
ul {
стиль списка: нет;
минимальная высота: 90 пикселей;
ширина: 500 пикселей;
отступ: 5 пикселей;
цвет фона: черный;
дисплей: гибкий;
flex-wrap: обертка;
}
li {
дисплей: встроенный блок;
минимальная ширина: 120 пикселей;
высота: 90 пикселей;
выравнивание текста: центр;
высота строки: 90 пикселей;
маржа справа: 5 пикселей;
нижнее поле: 5 пикселей;
цвет фона: аквамарин;
}
li: nth-last-child (4n + 3): first-child {
маржа слева: 125 пикселей;
цвет фона: розовый;
}
li: nth-last-child (4n + 2): first-child {
маржа слева: 250 пикселей;
цвет фона: синий;
}
li: nth-last-child (4n + 1): first-child {
маржа слева: 375 пикселей;
цвет фона: зеленый;
}
li: nth-last-child (4n): first-child {
цвет фона: фиолетовый;
}
- 1
- 1
- 2
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Требуемый здесь макет сводится к обычному макету с четырьмя столбцами слева направо с отступом первого элемента в зависимости от количества элементов в контейнере.
При наличии 4n элементов (4, 8, 12 и т. Д.) - отступы не требуются.
При наличии 4n + 1 элементов (1, 5, 9 и т. Д.) Требуется отступ по трем элементам.
При наличии 4n + 2 элементов (2, 6, 10 и т. Д.) Требуется отступ по двум элементам.
При наличии 4n + 3 элементов (3, 7, 11 и т. Д.) Требуется отступ по одному элементу.
li: nth-last-child (4n + 3): first-child {
маржа слева: 125 пикселей; / * отступ по одному элементу * /
}
li: nth-last-child (4n + 2): first-child {
маржа слева: 250 пикселей; / * двухэлементный отступ * /
}
li: nth-last-child (4n + 1): first-child {
маржа слева: 375 пикселей; / * трехэлементный отступ * /
}
li: nth-last-child (4n): first-child {
/ * без отступа * /
}
Чтобы понять это, давайте воспользуемся примером OP:
Скажем, есть 6 предметов.Нам нужно применить отступ с двумя элементами к первому элементу.
Селектор для этого будет:
li: nth-last-child (4n + 2): first-child {
маржа слева: 250 пикселей; / * 250 = 2 * 120 (ширина элемента) + пробел 2 * 5 пикселей * /
}
Интересный бит: : nth-last-child (4n + 2): first-child , что означает:
'выберите первого ребенка, если это также 4n + 2 ребенка от последнего ребенка.
html - flex-flow: row wrap - отображение как столбец, а не строка
html - flex-flow: row wrap - отображение как столбец, а не строка - qaruПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 63 раза
По какой-то причине flexbox не отображает мой контент подряд.Параметр гибкости переносится даже в полноэкранном режиме до того, как экран станет меньше. Не уверен, зачем он это делает. Я приложил скриншоты с кодом, чтобы вы могли понять, что я имею в виду. Я ожидал, что изображение будет справа от текста.
* {
маржа: 0;
отступ: 0;
размер коробки: 0;
}
Ли,
a {
размер шрифта: 0,75 бэр;
семейство шрифтов: "Робото";
font-weight: 700;
цвет: # 303133;
текстовое оформление: нет;
}
.section2-h2 {
размер шрифта: 56 пикселей;
семейство шрифтов: "Робото";
}
кнопка {
ширина: 176 пикселей;
высота: 47 пикселей;
фон: # 6442ff;
цвет: #ffffff;
семейство шрифтов: "Робото";
размер шрифта: 12 пикселей;
высота строки: 18 пикселей;
align-items: center;
граница: нет;
}
.section2-head {
маржа: 160 пикселей;
дисплей: гибкий;
flex-flow: перенос строк;
}
.section2-text {
максимальная ширина: 537 пикселей;
правое поле: 74 пикселя;
}
.кнопка {
маржа сверху: 60 пикселей;
}
Документ
<раздел>
<заголовок>
Lorem ipsum dolor sit ame.
Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel conctetur arcu. Pellentesque risus torpis, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Целое число nec viverra leo. Curabitur blandit pretium roncus. In ut egestas elit
задан 8 мая '20 в 16: 552020-05-08 16:55
2Ваше изображение слишком велико для строки, flex работает правильно и оборачивает ваше изображение под текстом, потому что больше нет места.Я знаю, что вы говорите, что размер изображения был определен специально для этой области, но с учетом полей, которые у вас есть на родительском элементе, и текстовой оболочке, которую он вставляет снизу.
Создан 08 мая.
Джон БеннеттДжон Беннетт4127 серебряных знаков88 бронзовых знаков
3Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css flexbox или задайте свой вопрос.
lang-html
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
CSS Flexbox №12. Сокращенное свойство flex-flow
В предыдущих руководствах этой серии вы узнали о свойствах flex-direction и flex-wrap .Они определяют ориентацию гибких элементов.
Они также определяют, переносятся ли элементы flex-items на следующую строку или остаются на той же строке в соответствии с доступным пространством в макете.
Сокращенное свойство flex-flow объединяет оба свойства. Давайте посмотрим на пример!
Шаг №1. Создайте HTML
- Откройте нужный редактор кода.
- Создайте пустой файл HTML.
- Посетите эту страницу, скопируйте HTML-код и сохраните файл.
Шаг 2. Создайте CSS
Сначала вам нужно добавить несколько основных стилей.
- Создайте файл с именем style.css (файл уже связан в теге заголовка HTML-кода).
- Скопируйте и вставьте этот код:
/ * ГЛОБАЛЬНЫЕ СТИЛИ * / * {box-sizing: border-box; } тело {цвет фона: #AAA; } .item {padding: 2rem; граница: 5px solid # 87b5ff; радиус границы: 3 пикселя; размер шрифта: 2em; семейство шрифтов: без засечек; font-weight: жирный; цвет фона: # 1c57b5; } Шаг 3.Создайте стили Flexbox
Первый шаг - объявить гибкий контейнер.
/ * СТИЛИ FLEXBOX * / .container {display: flex; цвет фона: # f5ca3c; } Теперь у вас есть гибкий контейнер с 4 гибкими элементами. Чтобы дать каждому элементу фиксированную «идеальную» (при наличии достаточно места) ширину, вы используете свойство flex-base .
.item {гибкость: 50%; } Шаг 4.Сокращение гибкого потока
Как уже говорилось, свойство flex-flow является сокращением для свойств flex-direction и flex-wrap вместе взятых.
Значения по умолчанию: строка, и nowrap.
- Измените код CSS, чтобы проверить эти значения:
.container {display: flex; цвет фона: # f5ca3c; flex-flow: ряд; } Вы не увидите никакой разницы, потому что свойство flex-flow использует значение по умолчанию nowrap .
- Еще раз отредактируйте код CSS:
.container {display: flex; цвет фона: # f5ca3c; flex-flow: перенос строк; } Теперь элементы переносятся на следующую строку. Теперь каждый элемент имеет такую ширину, которая указана в свойстве flex-base (50% контейнера).
Теперь вы можете протестировать различные возможные значения для flex-direction.
.container {display: flex; цвет фона: # f5ca3c; flex-flow: ряд обратного обертывания; } Элементы отображаются справа налево и переходят на следующую строку.
На оси блока
Необходимо объявить фиксированное значение высоты на контейнере, чтобы протестировать это свойство на оси блока. Это потому, что высота основного контейнера равна высоте элементов, содержащихся внутри него. Таким образом, все предметы будут складываться друг на друга, если вы не укажете высоту контейнера.
.container {display: flex; цвет фона: # f5ca3c; высота: 300 пикселей; flex-flow: перенос колонки; } - Еще раз отредактируйте код CSS:
.контейнер {display: flex; цвет фона: # f5ca3c; высота: 300 пикселей; flex-flow: обратное обертывание колонки; } Теперь элементы переходят к следующему столбцу, если вертикального пространства больше нет, как вы можете видеть на изображении.