Detaillierte Erläuterung der Probleme und Lösungen beim flexiblen Mehrspaltenlayout

Das Flex-Layout ist zweifellos einfach und leicht zu verwenden. Es macht unser Layout einfacher und schneller. Ich glaube jedoch, dass viele Leute bei der Verwendung von Flex für ein mehrspaltiges Layout auf die folgende Situation stoßen werden:

Dies geschieht, weil wir justify-content: space-between verwenden. Der Grund für die Verwendung dieser Einstellung ist, dass wir den Abstand zwischen den Elementen nicht speziell berechnen müssen, Flex berechnet ihn für uns. Aus diesem Grund tritt jedoch die obige Situation auf, wenn wir in der nächsten Zeile nicht genügend Elemente haben. Dann ist das Problem klar. Es wird durch nicht genügend Elemente in der letzten Zeile verursacht. Dann können wir uns überlegen, der letzten Zeile ein leeres Element hinzuzufügen, um Platz einzunehmen. Dadurch kann das obige Problem perfekt gelöst werden:

Hier verwenden wir Pseudoelemente, um Platzhalter zu erstellen. Beachten Sie, dass Pseudoelemente nur die Breite festlegen müssen, niemals die Höhe. Die Einzelheiten lauten wie folgt:

.container::nach{
      Inhalt: '';
      Breite: 320px;
    }

Die Wirkung ist wie folgt:

Wir werden jedoch feststellen, dass wir bei der Entwicklung von Displays nicht nur auf dreispaltige Layouts stoßen, sondern auch auf vier- und fünfspaltige Layouts. Offensichtlich funktioniert der obige Ansatz derzeit nicht. Wie lässt sich das Problem also lösen? Die Lösung ist auch sehr einfach. Das Prinzip ist dasselbe. Verwenden Sie leere Elemente, um Platz zu belegen. Dieses Mal werden wir keine Pseudoelemente verwenden. Wir verwenden echte DOM-Elemente für den Betrieb:

Schreiben Sie vorab eine Zeile leerer Elemente: wie folgt

<div Klasse="Container">
    <div Klasse="Box">1</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <div Klasse="Box">2</div>
    <!-- Trennlinie (unten ist das leere Element, das ich vorab geschrieben habe) -->
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
    <div Klasse="Box"></div>
  </div>

Entsprechende CSS-Einstellungen:

div:leer{
      Höhe: 0;
      Breite: 160px;
      Rand: keiner;
    }

Die Wirkung ist wie folgt:

Zu diesem Zeitpunkt werden wir feststellen, dass wir unser ursprüngliches Problem unabhängig von der Anzahl der Spalten perfekt lösen können.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.