Wie steuere ich den Elementumbruch 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!