Wie erreicht man einen einheitlichen Abstand in Flexbox?

Gleicher Abstand in Flexbox: Überbrückung der Lücke

Eine häufige Herausforderung bei Flexbox besteht darin, gleiche Abstände zwischen Elementen zu erreichen, einschließlich des ersten und letzten. Während die Eigenschaft „justify-content: space-around“ nahe kommt, erzeugt sie aufgrund ungleichmäßiger Abstände ein visuelles Ungleichgewicht.

Das Abstandsdilemma lösen

Zum Glück gibt es das sind zwei wirksame Methoden, um eine gleichmäßige Raumverteilung sicherzustellen.

Methode 1: Pseudoelemente

Moderne Browser behandeln ::before und ::after Pseudoelemente als Flex-Elemente. Indem wir diese zum Container hinzufügen, können wir „justify-content: space-between“ verwenden, um eine Illusion gleicher Abstände zu erzeugen. Die Pseudoelemente nehmen eine Breite von Null ein und lassen den gleichen Abstand zwischen sichtbaren Flex-Elementen.

HTML-Code:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS-Code:

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

flex-container::before,
flex-container::after {
  content: "";
}

Methode 2: Versatz Abstand

Eine andere Methode besteht darin, versetzte Abstände mithilfe von Rändern oder Polstern zu erstellen. Dieser Ansatz funktioniert konsistenter in allen Browsern, erfordert jedoch möglicherweise zusätzliche CSS-Anpassungen.

HTML-Code:

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS-Code:

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

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

Beide Methoden gleichen den Abstand zwischen flexiblen Elementen effektiv aus und sorgen so für eine einheitliche visuelle Anordnung.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen einheitlichen Abstand in Flexbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!