Wie kann ich den gleichen Abstand zwischen Flexbox-Elementen erreichen, einschließlich des ersten und letzten?

Gewährleistung des gleichen Abstands bei Flexbox-Elementen

Wenn Sie Flexbox zum Ausrichten von Elementen verwenden, kommt es häufig vor, dass Sie einen gleichen Abstand zwischen allen Elementen, einschließlich dem ersten und dem letzten, wünschen .

Das „Space-Around“-Problem

Die CSS-Eigenschaft justify-content: space-around erscheint um Gegenstände gleichmäßig mit gleichem Platz um sie herum zu verteilen. Wie jedoch in einem Artikel angegeben, hat der erste Artikel eine Raumeinheit gegenüber dem Behälterrand, was zu ungleichen Abständen zwischen den Artikeln führt.

Lösung des Problems mit Pseudoelementen

Ein Ansatz für Um gleiche Abstände zu erreichen, müssen Pseudoelemente verwendet werden. Durch das Hinzufügen der Pseudoelemente ::before und ::after zum Flex-Container können wir Markierungen mit der Breite Null einfügen, die als Flex-Elemente gelten.

Durch Anwenden von justify-content: space-between und Angabe der Breite Null für Bei den Pseudoelementen erscheinen die sichtbaren Flex-Elemente gleichmäßig verteilt.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
  width: 0;
}

flex-container::after {
  content: "";
  width: 0;
}

Das obige ist der detaillierte Inhalt vonWie kann ich den gleichen Abstand zwischen Flexbox-Elementen erreichen, einschließlich des ersten und letzten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!