wake-up-neo.com

Flexbox-Elementumbruch in eine neue Zeile

Es gibt ein Flexbox-Gitter.

.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>

Wie übertrage ich .new-string zusammen mit den nachfolgenden Elementen in eine neue Zeile?

htmlcsscss3flexbox
7
Yuri

Wenn Sie diese großartige Antwort betrachten, werden Sie feststellen, dass der einzige Cross-Browser-Weg (ohne 2 Zeilenumbruchlimit) darin besteht, 100%- Breite leere Blöcke ("Zeilenumbrüche") einzufügen. Bei ähnlichem Markup sieht das also ähnlich aus

.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>

Wenn Sie Ihren Markup-Stil beibehalten möchten, müssen Sie diese line-break-Blöcke über JavaScript einfügen:

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

Alternativ können Sie dies einfach tun

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%;
}

Das Flex-Element mit 100% Breite gibt Ihnen den Zeilenumbruch. Die einfachste Möglichkeit, eine neue Linie im Flex-Raster zu erhalten, ist sicher, dass Sie ein zusätzliches Div benötigen, aber ich finde es nicht so schlecht

2
Huangism

Dies scheint mit dem Grid-Layout möglich zu sein. Zuerst können Sie Artikel inline positionieren, die Sie verwenden können 

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

damit nimmt jeder Artikel 50px und positioniert Artikel in einer Zeile, bis keine Artikel mehr in eine Zeile passen. Und dann können Sie grid-column-start: 1; für ein bestimmtes Element verwenden, damit es in eine neue Zeile geht.

* {
  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

Alle Flex-Elemente sind standardmäßig auf order: 0 eingestellt. Dies bedeutet, dass sie in der Reihenfolge angeordnet werden, in der sie im Quellcode erscheinen.

Wenn Sie den letzten Artikel order: 1 angeben, wird der letzte Eintrag beim Hinzufügen weiterer Elemente erzwungen.

Die Pseudoelemente ::before und ::aftereines Flex-Containers erzeugen neue Flex-Elemente .

Wenn wir also ein Pseudoelement hinzufügen, dessen Breite groß genug ist, wird das letzte Element (durch order gesetzt) ​​in die nächste Zeile gesetzt.

.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