So steuern Sie den Elementumbruch in CSS Flexbox: Kann ich den Zeilenumbruch von Flexbox nach einem bestimmten Element erzwingen?

So steuern Sie den Elementumbruch in CSS Flexbox

Frage:

Gibt es eine Möglichkeit ein Element angeben, nach dem der Umbruch in einem Flexbox-Layout erfolgen soll? Dies wäre nützlich, um die Reaktionsfähigkeit einer Liste zu steuern, ohne zusätzliches Markup hinzuzufügen.

Antwort:

Es gibt zwar keine explizite „Flex-Break“-Eigenschaft Mit dem Flexbox-Standard können Sie diesen Effekt durch die Kombination der folgenden Techniken erzielen:

1. Setzen Sie „flex-wrap: wrap;“ auf dem Container: Dadurch können Elemente bei Bedarf in neue Zeilen umgebrochen werden.
2. Verwenden Sie „flex-basis: 100 %;“ auf die untergeordneten Elemente, nach denen Sie umbrechen möchten: Dadurch wird der Browser angewiesen, die Mindestbreite dieser Elemente auf 100 % festzulegen, wodurch sie effektiv gezwungen werden, in einer neuen Zeile zu beginnen.

Beispiel:

<code class="css">ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}</code>

In diesem Beispiel werden Elemente in der Liste nach jedem zweiten Element in eine neue Zeile umgebrochen (abhängig vom verfügbaren Platz). Durch Anpassen des Werts von „nth-child()“ können Sie steuern, welche Elemente den Umbruch verursachen.

Eine ausführlichere Demonstration finden Sie in der bereitgestellten JSFiddle: http://jsfiddle.net/theazureshadow/ww8DR /

Das obige ist der detaillierte Inhalt vonSo steuern Sie den Elementumbruch in CSS Flexbox: Kann ich den Zeilenumbruch von Flexbox nach einem bestimmten Element erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!