CSS - Grid vs Flex: Unterschied zwischen den Versionen
(→Grid) |
|||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
https://www.youtube.com/watch?v=sB-ooIXFTjg | https://www.youtube.com/watch?v=sB-ooIXFTjg | ||
| + | [[CSS - Flexbox]] (Flex Hauptseite) | ||
== Grid == | == Grid == | ||
Mit Grid legt man ein Raster im 2-Dimensionalen Raum an, während Flex für die Aufteilung in einer Richtung gedacht ist. Entweder horizontal (row) oder vertikal (column). | Mit Grid legt man ein Raster im 2-Dimensionalen Raum an, während Flex für die Aufteilung in einer Richtung gedacht ist. Entweder horizontal (row) oder vertikal (column). | ||
| Zeile 13: | Zeile 14: | ||
== Flex == | == Flex == | ||
| + | Flex kümmert sich um die Verteilung von Raum in einer Richtung, also entweder in Spalten oder Reihen (Standard-Einstellung). | ||
| + | Da Grid von den Browsern noch nicht so gut unterstützt wird (2019) nimmt man flex auch gerne zur Erstellung von Grids (indem man Flex Container verschachtelt) | ||
Beispiel | Beispiel | ||
display: flex | display: flex | ||
Aktuelle Version vom 18. Dezember 2019, 06:50 Uhr
https://www.youtube.com/watch?v=sB-ooIXFTjg CSS - Flexbox (Flex Hauptseite)
Grid[Bearbeiten]
Mit Grid legt man ein Raster im 2-Dimensionalen Raum an, während Flex für die Aufteilung in einer Richtung gedacht ist. Entweder horizontal (row) oder vertikal (column).
Bei Grid geht es eher um das Anordnen von Bereichen im Verhältnis zueinander. Grundlegendes Layout von Flächen.
- display: grid - Übergeordnetes Grid Container.
- grid-template-wors
- grid-template-columns
- grid-gap
- grid-template-areas
Vorteile[Bearbeiten]
Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche
Flex[Bearbeiten]
Flex kümmert sich um die Verteilung von Raum in einer Richtung, also entweder in Spalten oder Reihen (Standard-Einstellung). Da Grid von den Browsern noch nicht so gut unterstützt wird (2019) nimmt man flex auch gerne zur Erstellung von Grids (indem man Flex Container verschachtelt) Beispiel
display: flex justify-content: space-between align-items: center
Styling von kleineren Bereichen z.b. Navigation
