CSS - Grid vs Flex
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
