Flexbox/Grid?

[Matthias Scharwies]

Servus!

Sowas habe ich noch nie gehört und kann es auch nicht nachvollziehen. For one-dimensional layouts Flexbox excels.

Grid is even more powerful as you have the ability to position elements in two dimensions. / This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design.)

So wie ich Rachel Andrew verstanden habe, geht es drum flexible Layouts zu schaffen.

CSS-Frameworks wie Bootstrap haben den Nachteil durch präsentationsorientierte Klassen die Trennung von Inhalt und Design zu verwischen.

Und sind die Dimensionen nun auf den Content oder den Style bezogen? Wohl eher doch auf den Style?

Denke ich auch. Vielleicht meint sie, dass Flexbox gerade in der mobilen Ansicht, wo alles nur untereinander (1-dimensional) angeordnet wird, seine Stärken hat. Manche Eigenschaften von Flexbox sind wenig intuitiv. Und hier wird nun grid-Layout als das nächste große Ding beworben.

Aber wann ist was 1-, wann 2-dimensional?!

Mit 2-dimensional würde ich Reihen und Spalten ansehen. Ohne mich näher mit grid beschäftigt zu haben, ist eines der Probleme von Flexbox die Anordnung von Elementen, die nicht Geschwister sind. Wenn grid hier eine Lösung hätte (Stichwort: subgrids), wäre das gut.

Bei Grid-Systemen hingegen wird der Inhalt dem Grid angepasst, welches in der Regel aus 12 Spalten besteht. Es sind aber auch andere Spaltenanzahlen möglich.

Damit bezieht sich MrMurphy1 auf Bootstrap, aber nicht auf die CSS-Eigenschaft grid.

Also Flexbox was Flex ibles, Grid was Fixes? Aber Grid doch auch (was Flex ibles), bei Responsive?

Du hast recht! Grid ist auch flexibel und responsiv.

Wann nun Flexbox, wann nun Grid?!?!

Alle Wege führen nach Rom und im Webdesign kann man ebenfalls mehrere, gleichwertige Wege beschreiten.

Ich würde eher den praktischen Ansatz wählen und mir die Browserunterstützung ansehen:

• Flexbox: alles außer IE<10 (der ms-Präfix verwendet die alte 2012 Syntax, ist also nicht unproblematisch)

• grid: nur der IE mit Präfix, alle anderen kommen erst noch.

• display:table - Der letzte Kommentar im Artikel erwähnt, dass er wegen iOS 9 von Flexbox auf CSS Tabellen umgestiegen ist.

Herzliche Grüße

Matthias Scharwies