nicht angemeldet
Flexbox/Grid?
0 0 
Gunnar Bittersmann
0 Gunnar Bittersmann
Flexbox/Grid?
Matthias ScharwiesHallo, ich habe mich mal zu Flexbox und Grid schlau gemacht.. Mir ist immer noch nicht so richtig klar, wann nun Flexbox, wann nun Grid einzusetzen ist, mal ganz unabhängig davon, was besser unterstützt wird... Flexbox 1-, Grid 2-dimensional, so weit so gut, aber wann ist Content (speziell Fix-Content wie header/nav/...) 1-, wann 2-dimensional?! Danke im Voraus
-
Hallo
Flexbox 1-, Grid 2-dimensional, so weit so gut
Sowas habe ich noch nie gehört und kann es auch nicht nachvollziehen.
Zumal die Begriffe Flexbox und Grid so nicht zu vergleichen sind.
Flexbox ist eine Möglichkeit per CSS HTML-Container / Elemente anzuordnen. Andere Möglichkeiten sind zum Beispiel float, inline-Block, display:table, position.
Ein Grid ist hingegen das Ergebnis so einer Anordnung von Containern / Elementen.
Heutzutage ist es am sinnvollsten, wenn sich die Darstellung dem Inhalt von Webseiten anpasst.
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.
Gruss
MrMurphy
-
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.)
Und sind die Dimensionen nun auf den Content oder den Style bezogen? Wohl eher doch auf den Style?
Aber wann ist was 1-, wann 2-dimensional?!
Flexbox ist eine Möglichkeit per CSS HTML-Container / Elemente anzuordnen. Andere Möglichkeiten sind zum Beispiel float, inline-Block, display:table, position.
Ein Grid ist hingegen das Ergebnis so einer Anordnung von Containern / Elementen.
Heutzutage ist es am sinnvollsten, wenn sich die Darstellung dem Inhalt von Webseiten anpasst.
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.
Also Flexbox was Flex ibles, Grid was Fixes?
Aber Grid doch auch (was Flex ibles), bei Responsive?
Wann nun Flexbox, wann nun Grid?!?!
-
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
-
Naja ich versteh die Module immer noch nicht so richtig, jedenfalls nicht in ihren "Alleinstellungsmerkmalen".
> mal ganz unabhängig davon, was besser unterstützt wird...
Welcher methodische Ansatz ist zu wählen?!
Wann ist Flexbox, aber nicht Grid, wann Grid aber nicht Flexbox einzusetzen?!
Sonst schlag doch mal einer dem W3C Flexgrid vor. Solche Irritiationen werden sich ja wiederholen. Zusammenführungen gabs ja schon und nach meinem Gefühl wird das eh passieren oder ein Modul eingestellt. Hat nicht Gunnar einen guten Draht zum W3C (zumindest einiges übersetzt)?
-
-
-
-
@@Julian S.
Mir ist immer noch nicht so richtig klar, wann nun Flexbox, wann nun Grid einzusetzen ist
https://twitter.com/zeldman/status/709409254512308225
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
@@Julian S.
Mir ist immer noch nicht so richtig klar, wann nun Flexbox, wann nun Grid einzusetzen ist
Rachel Andrew: Should I stay or should I go? Ehm… Should I use Grid or Flexbox?
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)