Wie erzwinge ich das Umbrechen von Flexbox-Listen an bestimmten Positionen?

So unterbrechen Sie Flexbox-Listen an bestimmten Positionen

Sie kommen in eine Situation, in der Sie Flexbox-Listen an bestimmten Positionen nach bestimmten Elementen unterbrechen möchten, Verbesserung der Reaktionsfähigkeit Ihres Layouts. Obwohl der Flexbox-Standard dies nicht explizit unterstützt, gibt es einen Trick, den Sie anwenden können.

CSS Magic

Um den Umbruch nach einem bestimmten Element zu erzwingen, fügen Sie das folgende CSS hinzu zum Container:

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

Fügen Sie als Nächstes dieses CSS zu dem Element hinzu, nach dem der Umbruch erfolgen soll:

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

Wobei „4n“ die Position des Elements in darstellt die Liste (z. B. 4n bedeutet das vierte Element, das achte Element usw.).

Codebeispiel

Bedenken Sie beispielsweise das folgende HTML-Markup:

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

Und das zugehörige CSS:

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

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

Dieses Setup erzwingt, dass die Liste nach jedem zweiten Element umbrochen wird, was zu einem responsiven Layout führt, das sich an verschiedene Bildschirmgrößen anpasst.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich das Umbrechen von Flexbox-Listen an bestimmten Positionen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!