Lange Zeit hatten wir keine vernünftige Layouttechnik – und jetzt haben wir gleich zwei: Flexbox und Gridlayout. Gridlayout ist mächtiger, das ist klar. Brauchen wir damit überhaupt noch Flexbox? Diese Frage beantwortet man am besten an praktischen Beispielen – hier zeige ich ein Sticky-Footer-Layout, das dann erweitert wird, und führe vor, wie man das Layout in seinen Variationen jeweils mit Gridlayout und mit Flexbox umsetzt.
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, für Flexbox ist es vorgesehen, funktioniert aber noch nicht in allen Flexbox-Browsern. Aber man das gewünschte Verhalten durch etwas Trickserei erreichen ...
Für einfache Layoutanordnungen ist Flexbox das Mittel der Wahl, das ist klar. Trotzdem hat mich interessiert, wie man folgenden Fall mit Gridlayout löst - eine horizontale Navigation mit unbekannter Anzahl an Navigationspunkten, wobei der Platz aber bestmöglich ausgenutzt wird. Im Vergleich dazu zeige ich auch die Lösung mit Flexbox.
Ich beschäftige mich gerade genauer mit dem CSS3-Gridlayout.
Dort kann man Elemente über vier Eigenschaften ausrichten: align-content, justify-content, align-items und justify-items. Um mir besser zu merken, was genau wie wirkt, habe ich mir einen kleinen Spickzettel gebastelt.
Natürlich ist das CSS3-Gridlayout-Modul für komplexe Layoutaufteilungen gedacht, aber manchmal braucht man ja auch banale Dinge – wie beispielsweise eine horizontale und vertikale Zentrierung.
Bei Gridlayout stehen für die Zentrierung die Angaben align-content, justify-content sowie align-items und justify-items zur Auswahl. Was aber ist genau der Unterschied zwischen diesen Angaben? Und wie zentriert man jetzt am besten beim Einsatz vom CSS3-Gridlayout?
Die Kurzschreibweise `flex` bestimmt die flexiblen Ausmaße von Flexboxen und ist eine verkürzte Schreibweise für drei Angaben. Soweit so klar. Was aber weniger bekannt ist: Wenn man bei `flex` die Angabe für `flew-grow` oder `flex-basis` weglässt, werden andere Werte genommen als die Ausgangswerte der beiden Eigenschaften. Das ist ungewöhnlich. Aber noch mal ganz von vorne.
Bei Flexbox passen sich die Elemente aneinander an - aber was ist, wenn Elemente temporär ausgeblendet werden ... und die umgebenden Elemente sich trotzdem daran anpassen sollen?