Wie kann ich Elemente mit ungleichmäßiger Breite mit Flexbox gleichmäßig verteilen?

Flexbox verteilt ungleichmäßige Breite auf Elemente

Problem:

Sie verwenden Flexbox, um eine horizontale Navigation mit einem zu erstellen Unterschiedliche Anzahl von Elementen (3–5), aber die Breite ist nicht gleichmäßig verteilt sie.

Analyse:

Flexbox setzt die Flex-Basis-Eigenschaft standardmäßig auf „auto“, was bedeutet, dass die Größe der Elemente basierend auf ihrem Inhalt angepasst wird. In Ihrem Beispiel nehmen Elemente mit größerem Textinhalt mehr Platz ein.

Lösung:

Um eine gleichmäßige Verteilung sicherzustellen, legen Sie flex-basis: 0 fest. Dadurch wird die festgelegt Die anfängliche Flex-Basis wird auf Null gesetzt, sodass der verbleibende Platz basierend auf dem Flex-Wachstum proportional verteilt werden kann. Der Wert von Flex-Grow muss so eingestellt werden, dass sichergestellt ist, dass sie alle gleichmäßig expandieren.

Code:

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

Erklärung:

Der Nullwert für Flex-Basis stellt sicher, dass die Navigationselemente unabhängig vom Inhalt mit der gleichen Größe beginnen. Dann führt ein Flex-Grow von 1 dazu, dass sie sich gleichmäßig ausdehnen, um den verbleibenden Raum auszufüllen.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente mit ungleichmäßiger Breite mit Flexbox gleichmäßig verteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!