Flex Container Items Ausrichtung links

In einem mobilen Menü wird eine Liste von Social-Media-Symbolen mithilfe von Flexbox angeordnet. Um gleiche Abstände sicherzustellen, wird justify-content: space-around verwendet. Wenn Zeilen jedoch mehr als drei Elemente enthalten, werden sie zentriert statt linksbündig ausgerichtet.

Das Dilemma

Das Problem entsteht, weil justify-content: space- „around“ verteilt Gegenstände gleichmäßig mit halbgroßen Leerzeichen an jedem Ende. Wenn der verbleibende Platz negativ ist oder ein einzelnes Element vorhanden ist, verhält es sich wie ein Mittelpunkt. Dies führt im gegebenen Szenario zu einem unerwünschten zentriert ausgerichteten Verhalten.

Lösung

Um die im Zeilenumbruch verbliebenen Elemente auszurichten, ist justify-content: space-between das Antwort. Diese Variante gewährleistet eine gleichmäßige Verteilung, verhält sich jedoch im Falle eines negativen freien Speicherplatzes oder eines einzelnen Elements in der Zeile wie Flex-Start, wodurch die Elemente linksbündig ausgerichtet werden.

Beispielcode

Das Ersetzen von justify-content: space-around durch justify-content: space-between behebt das Ausrichtungsproblem. Darüber hinaus kann dem Container eine linke und rechte Polsterung hinzugefügt werden, um den Abstandseffekt von „space-around“ nachzuahmen.

Weitere Überlegungen

Eine potenzielle Herausforderung, die auftreten kann, ist wann Wickeln Sie zwei Gegenstände ein und richten Sie sie an den gegenüberliegenden Enden des Behälters aus. Die Lösung dieses Problems ist jedoch eine ganz andere Angelegenheit.