Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| modul:ffit:css:learningunits:lu01:display [2024/08/29 08:17] – kdemirci | modul:ffit:css:learningunits:lu01:display [2024/08/29 09:19] (aktuell) – kdemirci | ||
|---|---|---|---|
| Zeile 14: | Zeile 14: | ||
| | **grid** (Grid-Element) | Aktiviert das Grid-Layoutmodell für das Element, mit dem Sie Inhalte in einer zweidimensionalen Rasteranordnung organisieren können. Grid ist leistungsstark für die Erstellung von Layouts mit mehreren Spalten und Zeilen und bietet präzise Kontrolle über die Positionierung von Elementen. | | | **grid** (Grid-Element) | Aktiviert das Grid-Layoutmodell für das Element, mit dem Sie Inhalte in einer zweidimensionalen Rasteranordnung organisieren können. Grid ist leistungsstark für die Erstellung von Layouts mit mehreren Spalten und Zeilen und bietet präzise Kontrolle über die Positionierung von Elementen. | | ||
| - | Eine komplette Liste aller verfügbaren Werte finden Sie [hier](https:// | + | Eine komplette Liste aller verfügbaren Werte finden Sie [[https:// |
| ===== CSS Flexbox ===== | ===== CSS Flexbox ===== | ||
| Zeile 23: | Zeile 23: | ||
| Die Grundkonzepte von Flexbox umfassen das Container-Element und die darin enthaltenen Items. Der Flex-Container fungiert als Rahmen für das Flexbox-Layout und organisiert die Flex-Items innerhalb. Diese Items können horizontal oder vertikal angeordnet werden, je nach Ausrichtung der Hauptachse. Die Hauptachse definiert die Richtung, in der die Flex-Items im Container angeordnet sind, während die Querachse senkrecht dazu steht und die Ausrichtung der Items in Bezug auf die Hauptachse beeinflusst. Das Verständnis dieser Grundkonzepte ist entscheidend für die effektive Nutzung von Flexbox zur Erstellung dynamischer und flexibler Layouts in CSS. | Die Grundkonzepte von Flexbox umfassen das Container-Element und die darin enthaltenen Items. Der Flex-Container fungiert als Rahmen für das Flexbox-Layout und organisiert die Flex-Items innerhalb. Diese Items können horizontal oder vertikal angeordnet werden, je nach Ausrichtung der Hauptachse. Die Hauptachse definiert die Richtung, in der die Flex-Items im Container angeordnet sind, während die Querachse senkrecht dazu steht und die Ausrichtung der Items in Bezug auf die Hauptachse beeinflusst. Das Verständnis dieser Grundkonzepte ist entscheidend für die effektive Nutzung von Flexbox zur Erstellung dynamischer und flexibler Layouts in CSS. | ||
| - | {{: | + | {{: |
| ==== Eigenschaften des Containers ==== | ==== Eigenschaften des Containers ==== | ||
| Zeile 61: | Zeile 61: | ||
| height: 400px; | height: 400px; | ||
| } | } | ||
| - | </ | + | </ |
| ==== Platzieren von Elementen im Grid ==== | ==== Platzieren von Elementen im Grid ==== | ||
| Zeile 75: | Zeile 75: | ||
| | | ||
| } | } | ||
| - | </ | + | </ |
| Zeile 85: | Zeile 85: | ||
| | | ||
| } | } | ||
| - | </ | + | </ |
| ==== Grid Areas ==== | ==== Grid Areas ==== | ||