N Möglichkeiten, die letzte Listenzeile im CSS-Flex-Layout linksbündig auszurichten (Zusammenfassung)

Ich möchte einen Artikel von Zhang Xinxu zitieren und ihn mit Ihnen teilen. Wenn Sie Änderungen vornehmen möchten, klicken Sie bitte auf den Link, der durch das entsprechende Bild generiert wird, um die Änderungen vorzunehmen.

Problembeschreibung

//html
<div Klasse="Container">
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
</div>
// CSS
.container {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Flex-Wrap: Umwickeln;
}
.Liste {
    Breite: 24 %; Höhe: 100px;
    Hintergrundfarbe: himmelblau;
    Rand oben: 15px;
}

Diese Situation weicht offensichtlich von dem ab, was wir wollen.

Lösung mit fester Zeilenanzahl

Methode 1: Verwenden Sie Margen, um Lücken zu simulieren

Zum Beispiel

.container {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
}
.Liste {
    Breite: 24 %; Höhe: 100px;
    Hintergrundfarbe: himmelblau;
    Rand oben: 15px;
}
.list:nicht(:nth-child(4n)) {
    Rand rechts: berechnet (4 % / 3);
}

Der Stil ist wie folgt

Methode 2: Bestimmen Sie den Rand anhand der Nummer der letzten Zeile

Da die Anzahl der Spalten festgelegt ist, können wir den Randwert für Listen mit unterschiedlichen Zahlen berechnen, um eine vollständige Linksausrichtung sicherzustellen.

Angenommen, jede Zeile enthält 4 Elemente, die letzte Zeile hat jedoch nur 3 Elemente. Wenn die Größe des rechten Rands des letzten Elements „Listenbreite + Lückengröße“ beträgt, können die letzten 3 Elemente ebenfalls perfekt linksbündig ausgerichtet werden.

Mithilfe der Technologie zur Mengenanpassung von Pseudoklassen mit Baumstruktur (die Layouttechnik in diesem Artikel „Techniken zum Implementieren des CSS-Layouts von WeChat-Gruppenavataren durch Anpassen der Anzahl von Pseudoklassenlisten“ wird mithilfe dieser Technologie implementiert) können wir ermitteln, wie viele Elemente sich in der letzten Zeile befinden.

Zum Beispiel:

• .list:last-child:nth-child(4n - 1) gibt an, dass die letzte Zeile entweder 3 oder 7 Elemente hat ...
• .list:last-child:nth-child(4n - 2) gibt an, dass die letzte Zeile entweder 2 oder 6 Elemente hat ...
  

In diesem Beispiel gibt es 4 Elemente in einer Zeile, daher können wir die folgenden CSS-Einstellungen haben:

.container {
    Anzeige: Flex;
    /* Beide Enden ausrichten*/
    Inhalt ausrichten: Abstand dazwischen;
    Flex-Wrap: Umwickeln;
}
.Liste {
    Breite: 24 %; Höhe: 100px;
    Hintergrundfarbe: himmelblau;
    Rand oben: 15px;
}
/* Wenn die letzte Zeile 3 Elemente hat */
.list:letztes-Kind:n-tes-Kind(4n - 1) {
    Rand rechts: berechnet (24 % + 4 % / 3);
}
/* Wenn die letzte Zeile 2 Elemente hat */
.list:letztes-Kind:n-tes-Kind(4n - 2) {
    Rand rechts: berechnet (48 % + 8 % / 3);
}

Die dargestellten Phänomene sind wie folgt

Selbst wenn Sie es löschen, bleibt der Stil erhalten. Ich bewundere das.

Methode 3: Wenn die Breite des untergeordneten Elements nicht festgelegt ist

Dies ist schwer zu bewältigen, aber es gibt dennoch Lösungen und das Programm wird immer interessanter.
Derzeit ist es schwieriger, die oben beschriebene Methode zu verwenden, da die Breite nicht festgelegt ist und der Randwert nicht basierend auf der Breite berechnet werden kann.

(1) Das letzte Element, Rand rechts: auto;

.container {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Flex-Wrap: Umwickeln;
}
.Liste {
    Hintergrundfarbe: himmelblau;
    Rand: 10px;
}
/* Das letzte Element margin-right:auto */
.list:letztes-Kind {
    Rand rechts: automatisch;
} 

(2) Erstellen Sie ein Pseudoelement und setzen Sie flex:auto oder flex:1

.container {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Flex-Wrap: Umwickeln;
}
.Liste {
    Hintergrundfarbe: himmelblau;
    Rand: 10px;
}
/* Pseudoelemente zur Unterstützung der Linksausrichtung verwenden*/
.container::nach {
    Inhalt: '';
    flex: auto; /* oder flex: 1 */
} 

4. Wenn die Anzahl der Zeilen und Spalten nicht festgelegt ist

//HTML Quelltext:
<div Klasse="Container">
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <div Klasse="Liste"></div>
    <i></i><i></i><i></i><i></i><i></i><i></i>//Eins weniger als Div!
</div>
//CSS-Code:
.container {
    Anzeige: Flex;
    Inhalt ausrichten: Abstand dazwischen;
    Flex-Wrap: Umwickeln;
    Rand rechts: -10px;
}
.Liste {
    Breite: 100px; Höhe: 100px;
    Hintergrundfarbe: himmelblau;
    Rand: 15px 10px 0 0;
}
.container > ich {
    Breite: 100px;
    Rand rechts: 10px;
} 

Damit ist dieser Artikel über N Möglichkeiten, die letzte Zeile einer Liste in einem CSS-Flex-Layout linksbündig auszurichten, abgeschlossen (Zusammenfassung). Weitere Informationen dazu, wie Sie die letzte Zeile einer Liste in einem CSS-Flex-Layout linksbündig ausrichten, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!