CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet

Bei Verwendung des Layouts justify-content:space-between hat die Verwendung von justify-self: start; für die letzte Elementzeile keine Wirkung. Ich habe nachgeschaut und festgestellt, dass CSS3 Flexbox noch nicht unterstützt wird.

Wie kann man also die letzte Zeile linksbündig ausrichten?

Mehrere bestehende Lösungen

• Verwenden Sie Tag-Elemente, um fehlende Elemente zu vervollständigen
• Raster verwenden
• Verwenden von Pseudoklassen

Wenn bei Pseudoklassen das letzte Element voll ist, gibt es einen Platzhalter, das Raster weist Kompatibilitätsprobleme auf und wir möchten keine neuen Tags hinzufügen.

Linksbündige Ausrichtung für jede Zeile mit einer festen Anzahl Spalten

Da die Anzahl der Spalten festgelegt ist, können wir margin-right Randwert des letzten Elements berechnen, um eine vollständige Linksausrichtung sicherzustellen.

Unter der Annahme, dass jede Zeile nur drei Spalten mit Elementen aufweist, ist die Verarbeitung margin-right nur dann erforderlich, wenn sich das letzte Element in der zweiten Spalte befindet (d. h. li:last-child:nth-child(3n + 2) ) und der Abstand der Breite eines Elements + der Lückenbreite entspricht.

Angenommen, die Elementbreite beträgt $width , dann beträgt der für die obige Situation erforderliche Abstand: (100% - 3 * $width) / 2 + $width => (100% - $width) / 2

.list1 li:letztes-Kind:n-tes-Kind(3n + 2) {
  Rand rechts: calc((100% - $Breite) / 2);
} 

Ebenso müssen wir im Fall einer Zeile und vier Spalten zwei Fälle behandeln: Das letzte Element befindet sich in der zweiten Spalte und das letzte Element befindet sich in der dritten Spalte.

.list2 li:letztes-Kind:n-tes-Kind(4n + 2) {
  Rand rechts: calc((100% - $Breite) / 3 * 2);
}
.list2 li:letztes-Kind:n-tes-Kind(4n + 3) {
  Rand rechts: calc((100% - $Breite) / 3 * 1);
} 

Klicken Sie hier, um den Demo-Code anzuzeigen

Linksbündige Ausrichtung für jede Zeile mit einer nicht festgelegten Spaltenanzahl

Ich denke, die beste Lösung ist die Verwendung von Grids. Davon gibt es im Internet eine Menge, deshalb werde ich hier nicht näher darauf eingehen.

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.