justify-content: space-evenly bei Flexbox und Gridlayout

Durch justify-content: space-around wird bei Flexbox und Gridlayout der Leerraum zwischen den Items und am Anfang und Ende ergänzt. Zwischen den Items ist der Leerraum jedoch doppelt so groß wie am Anfang und am Ende. Manchmal hätte man es aber auch alle Abstände gleich – also space-evenly. Das funktioniert bei Gridlayout, allerdings nicht bei Flexbox, aber bei Flexbox erreicht man das gewünschte Verhalten durch etwas Trickserei …

Aber von Anfang an.

Die Eigenschaft justify-content sorgt bei Flexbox für die Ausrichtung der Flexitems entlang der Hauptachse. Angegeben wird sie beim Flexcontainer. Mögliche Werte sind flex-start, flex-end, centerspace-between und space-around. Die Auswirkung der einzelnen Angaben zeigt der folgende Screenshot.

space-around: halber Abstand am Anfang und Ende

Bei space-around wird der verfügbare Leerraum zwischen die Items verteilt und auch am Anfang und am Ende ergänzt. Das Besondere: Am Anfang und Ende ist allerdings nur halb so viel Platz wie zwischen den Items.

Manchmal wäre es aber auch praktisch, es gäbe space-evenly: d.h. dass der Platz am Anfang und am Ende genauso groß ist wie zwischen den einzelnen Items.

 

justify-content: space-evenly bei Gridlayout

Bei Gridlayout geht das …

.container {
display: grid;
justify-content: space-evenly;
}

space-evenly bei Gridlayout ausprobieren

justfy-content: space-evenly bei Flexbox simulieren

… bei Flexbox allerdings nur in Firefox, nicht in Chrome beispielsweise (danke für den Hinweis an http://maddesigns.de/).

Wenn man das nachbauen will, kann man aber etwas tricksen: Man erzeugt Inhalte am Anfang und Ende des Flexcontainers – die aber keine Ausmaße einnehmen.

.container::before, .container::after {
content: "";
}

Dann definiert man für den Flexcontainer space-between: Damit haben wir denselben Abstand zwischen den Items und am Anfang und Ende.

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

Beispiel ausprobieren
Die Idee dazu stammt von den wirklich sehr interessanten Ausführungen bei Stackoverflow auf die Frage, warum es kein justify-items und justify-self bei Flexbox gibt

3 Kommentare zu “justify-content: space-evenly bei Flexbox und Gridlayout”

  1. Jens Grochtdreis

    Das ist ja mal eine pfiffige Idee. Danke dafür. Warum bin ich nicht selber drauf gekommen, wo ich doch in der letzten Zeit so viel mit den Pseudoelementen gemacht habe?

  2. Sven

    Das Funktioniert auch für Flexbox, wenn der Browser (so wie Firefox) das unterstützt.

    • Florence

      oh, danke werde ich ergänzen – ich hatte nicht gemerkt, dass Firefox das schon kann!