Flexbox item — перенос на новую строку

#html #css #css3 #flexbox

Есть Flexbox сетка.



.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

  

  

  






Как перенести .new-string на новую строку вместе с элементами, которые идут после него?
    

Ответы

Ответ 1

Перевод ответа на enSO.

Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока
с display: flex.



Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах.
Если они достаточно широкие (width: 100%), они будут создавать перенос строки.



.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

  
1
  
2
  
3
  

  
4
  
5
  
6
  

  
7
  
8
  
9
  

  
10





Но это уродливо и не семантически. Вместо этого, мы можем генерировать псевдоэлементы
внутры flex-контейнера и использовать свойство order чтобы перемещать их в нужные места.



.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  background: silver;
}
.container::before, .container::after {
  content: '';
  width: 100%;
  order: 1;
}
.item:nth-child(n + 4) {
  order: 1;
}
.item:nth-child(n + 7) {
  order: 2;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9





Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и
::after. Это значит, что мы можем создать только 2 переноса строки.

Чтобы разрешить это, вы можете генерировать псевдоэлементы внутри flex-элементов
 вместо flex-контейнера. Таким способом вы не будете ограничены двумя. Но эти псевдоэлементы
не будут flex-элементами, поэтому не будут создавать переносы строк.

Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент
поддерживаемая только Firefox 37):


  Элемент сам по себе не генерирует никаких блоков, но его дети и
  псевдоэлементы генерируют блоки как обычно. С целью генерации блоков
  и разметки элемент будет расцениваться как будто он был заменён его
  детьми и псевдоэлементами в дереве документа.


Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть
содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими
дополнительными обёртками и псевдоэлементами детей.



.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  display: contents;
}
.item > div {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) > div {
  background: silver;
}
.item:nth-child(3n)::after {
  content: '';
  width: 100%;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10





Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox
позволяет принудительные переносы с помощью break-before, break-after или их псевдонимов
в CSS 2.1:

.item:nth-child(3n) {
  page-break-after: always; /* Синтаксис CSS 2.1 */
  break-after: always; /* Новый синтаксис */
}




.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  page-break-after: always;
  background: silver;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10





Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают
в Firefox.


Ответ 2

Во flexbox, к сожалению, не силен, но вот такой трюк помню:



.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
  
}

.flex:after {
  content:'';
  width:100%;
  order:0;
}

.item.new-string,
.item.new-string ~ .item {
  order:1;
}

  

  

  

  

  

  

  

  




Ответ 3

Решил с помощью добавления элемента разрыва



.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.new-string {
  width: 100%;
}

  

  

  

  




Ответ 4

Может, как-нить с марджином попробовать поиграться?



.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}
.item:nth-child(2) {
  margin-right: calc(100% - 125px);
}

  

  

  

  

  

  

  




Ответ 5

.container {
  display: flex;   
  flex-wrap: wrap;
  justify-content: center;
}


Этого должно хватить!


Ответ 6

Можно в разметку вставить горизонтальную линию



flex hr {
  width: 100%;
  border: 0;
}

  
item
  
item
  

  
item new-string