Wie zentriere ich die letzte Elementzeile in einem CSS-Rasterlayout?

So erreichen Sie eine zentrierte Ausrichtung in der letzten Zeile eines CSS-Rasters

Wenn Sie CSS-Raster zum Layouten von Elementen verwenden, wird es schwierig, dies zu erreichen Aufgrund der Beschaffenheit der Gitterschienen muss die letzte Reihe mittig ausgerichtet werden. Flexbox bietet jedoch eine geeignetere Lösung für solche Ausrichtungsanforderungen.

Um die letzte Reihe von Elementen horizontal in der Mitte auszurichten, wenden Sie Flexbox-Eigenschaften auf das Containerelement an:

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Der Flex -wrap: Mit der Wrap-Eigenschaft können Elemente bei Bedarf in mehrere Zeilen fließen, während justify-content: center alle Elemente in horizontaler Richtung relativ zum Ganzen packt Zeile.

Als nächstes legen Sie das Flex-Verhalten für einzelne Elemente fest:

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

Hier gibt flex: 0 0 calc(16.66% - 20px) die Abmessungen des Elements an und stellt sicher, dass alle Elemente übereinstimmen gleich groß. box-sizing: border-box sollte für genaue Berechnungen einbezogen werden.

Dadurch werden Elemente gleichmäßig über die Zeilen verteilt und die letzte Zeile wird aufgrund der Eigenschaft „justify-content: center“ zentriert. Dieser Ansatz beseitigt die Einschränkungen von CSS Grid und bietet eine flexible Lösung zum Zentrieren von Elementen in der letzten Zeile für eine beliebige Anzahl von Elementen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich die letzte Elementzeile in einem CSS-Rasterlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!