Wie richtet man flexible Artikel beim Verpacken links aus?

So richten Sie flexible Elemente beim Verpacken links aus

Problem:

Ein mobiles Menü Zeigt Social-Media-Symbole in Dreierreihen an, die horizontal mit gleichen Abständen angeordnet sind. Wenn jedoch mehr als drei Elemente vorhanden sind, beginnen die nachfolgenden Zeilen von der Mitte aus aufzufüllen. Das Ziel besteht darin, die Listenelemente in jeder Zeile linksbündig auszurichten, ohne den gleichen Abstand zu stören.

Lösung:

Ersetzen Sie die Eigenschaft „justify-content: space-around“ durch justify-content: space-between.

Erklärung:

In CSS Flexbox richtet die Eigenschaft „justify-content“ Elemente horizontal entlang der Hauptachse aus. space-around verteilt Gegenstände gleichmäßig mit Leerzeichen halber Größe an beiden Enden. Wenn jedoch nur wenig Platz vorhanden ist oder sich nur ein Element auf der Linie befindet, verhält es sich wie eine Mitte, wodurch die Elemente zentriert werden.

Im Gegensatz dazu verteilt „Space-Between“ Elemente gleichmäßig ohne Leerzeichen halber Größe an den Enden . Wenn der Platz begrenzt ist oder nur ein Element vorhanden ist, verhält es sich wie ein Flex-Start, der die Elemente linksbündig ausrichtet.

Durch die Verwendung von justify-content: space-between werden die Social-Media-Symbole jeweils linksbündig ausgerichtet Reihe und stellen Sie sicher, dass die nächste Reihe von links aufgefüllt wird.

Zusätzliche Hinweise:

Bei Verwendung von Leerzeichen dazwischen kann dem Behälter eine linke und rechte Polsterung hinzugefügt werden um das Verhalten des Weltraums zu simulieren. Dies erfordert jedoch möglicherweise weitere Anpassungen, um die Ausrichtung mehrerer Elemente in jeder Zeile zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonWie richtet man flexible Artikel beim Verpacken links aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!