CSS - Grid vs Flex: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „ https://www.youtube.com/watch?v=sB-ooIXFTjg == Grid == Hier geht es eher um das Anordnen von Bereichen im Verhältnis zueinander. Grundlegendes Layout (Footer…“) |
(→Grid) |
||
| Zeile 1: | Zeile 1: | ||
https://www.youtube.com/watch?v=sB-ooIXFTjg | https://www.youtube.com/watch?v=sB-ooIXFTjg | ||
== 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). | |
| − | * display: | + | |
| + | 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-wors | ||
* grid-template-columns | * grid-template-columns | ||
| Zeile 9: | Zeile 11: | ||
=== Vorteile === | === Vorteile === | ||
Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche | Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche | ||
| + | |||
== Flex == | == Flex == | ||
Beispiel | Beispiel | ||
Version vom 18. Dezember 2019, 06:48 Uhr
https://www.youtube.com/watch?v=sB-ooIXFTjg
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).
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
Große Bereiche Positionieren auch vertikal zentriert etc. immer dann wenn der Browser viel übernehmen soll. Positionieren innerhalb der Grid Bereiche
Flex
Beispiel
display: flex justify-content: space-between align-items: center
Styling von kleineren Bereichen z.b. Navigation
