Wie zentriere ich Elemente in der letzten Zeile mit Flexbox?

So zentrieren Sie Elemente in der letzten Zeile mit Flexbox

Wenn Sie ein CSS-Raster zum Anordnen mehrerer Elemente verwenden, kann die Ausrichtung schwierig sein sie innerhalb einer Reihe. Raster dienen in erster Linie zum Ausrichten von Elementen innerhalb einer Spalte oder Spur, wodurch es schwierig ist, eine Ausrichtung über eine ganze Zeile hinweg zu erreichen.

Warum CSS-Raster ungeeignet sind

CSS-Raster werden verwendet ein System aus Gleisen und Zellen, wobei die Gleise entweder horizontal oder vertikal verlaufen. Wenn Sie Elemente in einer Rasterzelle platzieren, können Sie deren Ausrichtung innerhalb dieser bestimmten Zelle steuern. Das Ausrichten von Elementen über mehrere Zellen oder eine ganze Zeile hinweg wird jedoch durch die sich kreuzenden Spuren behindert.

Flexbox zur Ausrichtung verwenden

Ein geeigneterer Ansatz zum Ausrichten von Elementen über eine Zeile hinweg ist die Verwendung von Flexbox. Flexbox wurde speziell für die Anordnung von Elementen entlang einer einzelnen Achse (horizontal oder vertikal) entwickelt, sodass Sie mehr Kontrolle über die Ausrichtung haben.

Um Elemente in der letzten Reihe mithilfe von Flexbox zu zentrieren, führen Sie die folgenden Schritte aus:

1. Wickeln Sie die Elemente in einen flexiblen Container.
2. Setzen Sie die Eigenschaft „justify-content“ auf „center“, um die Elemente innerhalb des Containers horizontal auszurichten Container.
3. Verwenden Sie die Flex-Eigenschaft, um die gewünschte Breite und Flexibilität jedes Elements anzugeben.
4. Stellen Sie sicher, dass bei allen Elementen die Box-Sizing-Eigenschaft auf „border-box“ gesetzt ist, um Innenabstände und Ränder einzuschließen Gesamtbreitenberechnung.

Beispielcode

Der folgende Codeausschnitt zeigt, wie man mit Flexbox eine zentrierte Ausrichtung in der letzten Zeile erreicht:

#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;
}

Erklärung

In diesem Beispiel:

• Das # Der Container ist als Flex-Container mit Flex-Wrap: Wrap eingerichtet, damit Artikel auf mehrere Zeilen gewickelt werden können.
• Der justify-content: center stellt sicher, dass Elemente horizontal im Container zentriert sind.
• Die Flex-Eigenschaft wird verwendet, um die Breite jedes Elements dynamisch basierend auf dem verfügbaren Platz zu berechnen.
• Festlegen der Boxgröße : border-box garantiert, dass Polsterung und Ränder in die Gesamtbreite des Artikels einbezogen werden, wodurch ungleichmäßige Abstände vermieden werden.

Durch die Verwendung von Flexbox können Sie eine zentrierte Ausrichtung erreichen Ausrichtung in der letzten Zeile, unabhängig von der Anzahl der Elemente, wodurch Ihr Layout optisch ansprechender wird.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Elemente in der letzten Zeile mit Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!