Перенос элемента Flexbox в новую строку [дубликат]

этот вопрос уже есть ответ здесь:

  • разрыв линии в многострочном flexbox 7 ответов

существует сетка flexbox.

css lang-css prettyprint-override">.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}
html lang-html prettyprint-override"><div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

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

6
css css3 flexbox html

4 ответов

если вы посмотрите на это замечательный ответ вы заметите, что единственный кросс-браузерный способ (без ограничения разрыва строки 2) - вставка 100%-ширина пустых блоков ("разрывы линий"). Так что для подобной разметки это будет выглядеть как

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

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

.line-break {
  width: 100%;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="line-break"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

если вы хотите сохранить свой стиль разметки, вам придется вставить это line-break блоки через JavaScript:

var items = document.querySelectorAll(".flex > .item.new-string");

for (var i = 0; i < items.length; i++) {
  var lineBreak = document.createElement('div');
  lineBreak.className = "line-break";

  items[i].parentNode.insertBefore(lineBreak, items[i]);
}
.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

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

.line-break {
  width: 100%;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
4

в качестве альтернативы вы можете просто сделать это

HTML-код

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item line-break"></div>
  <div class="item new-string"></div>
</div>

в CSS

.line-break {
    width: 100%;
}

деталь гибкого трубопровода ширины 100% передаст вам линия пролом. Самый простой способ получить новую линию в гибкой сетке, конечно, вам нужен дополнительный div, но я не считаю, что это плохой способ сделать это

2

это, кажется, можно сделать с помощью Grid-layout. Сначала для размещения элементов inline вы можете использовать 

grid-template-columns: repeat(auto-fill, 50px);

так что каждый элемент занимает 50px, и он будет размещать элементы в одной строке, пока больше элементов не может поместиться в одной строке. И тогда вы можете использовать grid-column-start: 1; по конкретному пункту, чтобы он переходил в новую строку.

* {
  box-sizing: border-box;
}
.flex {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 50px);
  border: 2px solid red;
}

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

.new-string {
  grid-column-start: 1;
  background: red;
}
<div class="flex"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div><div class="item"></div><div class="item new-string"></div><div class="item"></div></div>
2

все элементы flex по умолчанию установлены в order: 0. Это означает, что они будут выложены в том порядке, в котором они появляются в исходном коде.

если вы даете последний пункт order: 1, это заставляет его быть последним, когда добавляются дополнительные элементы.

на ::before и ::after псевдо-элементы в контейнере flex создают новые элементы flex.

поэтому, если мы добавим один псевдо-элемент с достаточно большой шириной, он заставит ваш последний элемент (задается order) в следующий ряд.

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

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

.new-string {
  order: 1;
}

.flex::after {
  content: "";
  flex: 0 0 100%;
  height: 0;
}
<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>
1