Heim > Web-Frontend > CSS-Tutorial > 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: Kann ich den Zeilenumbruch von Flexbox nach einem bestimmten Element erzwingen?

Mary-Kate Olsen
Freigeben: 2024-10-30 20:10:03
Original
1077 Leute haben es durchsucht

How to Control Element Wrapping in CSS Flexbox: Can I Force Flexbox to Wrap After a Specific Element?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage