Wie kann ich die letzte Zeile eines Flexbox-Rasters gleichmäßig mit „justify-content: space-between' ausrichten?

Flex-Box: Die letzte Zeile am Raster ausrichten

In einem Flex-Box-Layout kann das Ausrichten von Elementen in der letzten Zeile mit den anderen eine Herausforderung darstellen. Mit justify-content: space-between; kann die Anpassung der Rastergröße die Ausrichtung beeinträchtigen.

Um dieses Problem zu lösen, wurde eine einfache und elegante Lösung gefunden:

Verwenden von ::after

Fügen Sie ein ::after-Pseudoelement hinzu, das den verbleibenden Platz automatisch ausfüllt:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Wie es funktioniert Funktioniert:

Das Pseudoelement ::after erstellt ein virtuelles Element, das den leeren Raum im Raster füllt. Durch die Angabe von „flex: auto;“ passt es sich automatisch an die Passform an. Somit werden die Elemente der letzten Zeile unabhängig von der Rastergröße und ohne Änderung der HTML-Struktur nahtlos ausgerichtet.

Eine Live-Demonstration finden Sie im bereitgestellten CodePen-Beispiel hier: http://codepen.io/DanAndreasson/pen /ZQXLXj

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Zeile eines Flexbox-Rasters gleichmäßig mit „justify-content: space-between' ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!