Wie kann ich Elemente nur in der letzten Zeile eines responsiven Rasterlayouts zentrieren?

Elemente in der letzten Zeile zentrieren: CSS-Raster vs. Flexbox

Dilemma:
Bei der Verwendung von CSS-Rastern zum Ausrichten von Elementen in einem Wie können Sie in einem gleichmäßig verteilten Raster Elemente allein in der letzten Reihe zentrieren und gleichzeitig eine beliebige Anzahl von Elementen unterbringen? Elemente?

Nicht für CSS-Raster geeignet:
CSS-Raster sind nicht ideal zum Ausrichten von Elementen über eine ganze Zeile oder Spalte hinweg, da sich kreuzende Spuren den gewünschten Effekt behindern.

Alternative: Flexbox
Um die gewünschte Zentrierung zu erreichen, sollten Sie die Verwendung von Flexbox mit justify-content: center in Betracht ziehen. Dadurch werden Elemente horizontal in der Mitte der Zeile angeordnet, während die Ränder sie auseinanderdrücken.

Mechanik:
Bei vollständigen Zeilen hat justify-content keine Auswirkung, sodass die Elemente vollständig sind gerechtfertigt mit keinem freien Speicherplatz. In Zeilen mit freiem Speicherplatz (d. h. in der letzten Zeile) werden die Elemente jedoch angezeigt zentriert.

Beispiel:

CSS:

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

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

* {
  box-sizing: border-box;
}

HTML:

<div>

Ergebnis:
Mit Bei diesem Ansatz werden die Elemente in der letzten Zeile zentriert, während das Layout weiterhin auf unterschiedliche Anzahlen von Elementen reagiert.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente nur in der letzten Zeile eines responsiven Rasterlayouts zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!