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

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.

<<:  9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web

>>:  3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags

Artikel empfehlen

Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL

Ein Kollege hat mir einmal gesagt, ich solle eine...

Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse

Die übliche Methode zum Bereitstellen eines Sprin...

W3C Tutorial (3): W3C HTML Aktivitäten

HTML ist eine Hybridsprache, die zum Veröffentlic...

Schnelles Verständnis des Vue-Routing-Navigationsschutzes

Inhaltsverzeichnis 1. Globale Wache 1. Globale Fr...

js um das Schlangenspiel mit Kommentaren zu implementieren

In diesem Artikelbeispiel wird der spezifische Co...

Was bedeutet Eingabetyp und wie kann die Eingabe begrenzt werden?

Gängige Methoden zur Begrenzung der Eingabe 1. Um ...

Zusammenfassung der Grundlagen der Vue-Komponenten

Komponentengrundlagen 1 Wiederverwendung von Komp...

Dateifreigabe zwischen Ubuntu und Windows unter VMware

In diesem Artikel wird die Methode zum Teilen von...

Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt

Nginx: PV, UV, unabhängige IP Jeder, der Websites...

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Wie fügt man CSS in HTML ein? Es gibt drei Möglic...

Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker

Problemphänomen: [root@localhost ~]# Docker-Image...

Tutorial zu HTML-Tabellen-Tags (21): Zeilenrahmen-Farbattribut BORDERCOLOR

Um die Tabelle zu verschönern, können Sie für die...