Wie kann ich die gleiche Breite aller Elemente in einem Flexbox-Layout sicherstellen?

Flexbox: Gleiche Breite für alle Elemente sicherstellen

Bei Versuchen, eine reaktionsfähige Flexbox-Navigationsleiste mit unterschiedlichen Elementmengen zu erstellen, können Entwickler auf ein Problem stoßen, bei dem die Breitenverteilung zwischen Elementen auftritt ist ungleichmäßig. In diesem Artikel wird eine Lösung für diese Herausforderung untersucht.

Hintergrund

Das folgende Tutorial nutzte zunächst display:table, um eine gleichmäßige Breitenverteilung zu erreichen, stieß jedoch bei der Umstellung auf Flexbox auf Probleme. Flexbox stellt „Flex-Basis“ standardmäßig auf „Auto“ ein, wodurch die Inhaltsgröße als Anfangsgröße für jedes Flex-Element verwendet wird. Folglich nehmen Elemente mit größerem Inhalt mehr Platz ein.

Lösung: Flex-Basis auf 0

Um die gleiche Breite für alle Elemente sicherzustellen, setzen wir Flex-Basis auf 0. Dadurch wird das Initial eliminiert Größe, sodass der gesamte verbleibende Platz proportional basierend auf Flex-Grow verteilt werden kann.

Beispiel

Der folgende Codeausschnitt zeigt, wie Das Setzen von Flex-Basis auf 0 löst das Problem:

li {
  flex-grow: 1;
  flex-basis: 0;
  /* ... */
}

Visuelle Erklärung

Das folgende Diagramm aus der CSS-Flexbox-Spezifikation veranschaulicht das Konzept von Flex-Basis:

[ Diagramm aus der CSS-Flexbox-Spezifikation]

Arbeitsbeispiel

Referenzieren Sie die geänderte Fiddle, um das Gleiche zu beobachten Breitenverteilung:

[Arbeitsgeige]

Das obige ist der detaillierte Inhalt vonWie kann ich die gleiche Breite aller Elemente in einem Flexbox-Layout sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!