CSS - Grid vs Flex: Unterschied zwischen den Versionen
(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…“) |
|||
| (2 dazwischenliegende Versionen desselben Benutzers werden 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). | |
| − | * 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 12: | ||
=== 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 == | ||
| + | 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
