Heim  >  Artikel  >  Web-Frontend  >  Wie steuere ich den Elementumbruch in CSS Flexbox?

Wie steuere ich den Elementumbruch in CSS Flexbox?

Susan Sarandon
Susan SarandonOriginal
2024-10-30 09:22:03235Durchsuche

How to Control Element Wrapping in CSS Flexbox?

Flexible Element-Wrapping-Steuerung in CSS-Flexbox

Die Notwendigkeit, ein Element anzugeben, nach dem CSS-Flexbox-Elemente umgebrochen werden sollen, wird im nicht direkt angesprochen Flexbox-Standard. Allerdings kann eine clevere Technik eingesetzt werden, um diesen Effekt zu erzielen.

Um den Umbruch nach einem bestimmten Element zu erzwingen, gehen Sie folgendermaßen vor:

  1. Set display: flex; und Flex-Wrap: Wrap; auf dem Containerelement.
  2. Setzen Sie auf dem Element, nach dem Sie umbrechen möchten, flex-basis: 100 %;.

Diese Lösung legt effektiv eine Mindestbreite für das Element fest, was dazu führt es, bei Bedarf zu einer eigenen Zeile zu wechseln.

Bedenken Sie beispielsweise das folgende Markup:

<code class="html"><ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul></code>

Und das folgende CSS:

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

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

Dies wird dazu führen die Elemente, die nach dem vierten Element umbrochen werden sollen, wodurch zwei Zeilen entstehen:

1 2
3 4

Das obige ist der detaillierte Inhalt vonWie steuere ich den Elementumbruch in CSS Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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