it-swarm.com.ru

Перенос элемента Flexbox на новую линию

Есть сетка флексбокс.

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

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

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

7
Yuri

Если вы посмотрите на этот отличный ответ вы заметите, что единственный кросс-браузерный способ (без ограничения на 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>

5
Vadim Ovchinnikov

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

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
Huangism

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

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
Nenad Vracar

Все гибкие элементы по умолчанию установлены на 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
Michael_B