Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung | |||
| modul:ffit:css:learningunits:lu01:display [2024/08/29 09:18] – kdemirci | modul:ffit:css:learningunits:lu01:display [2024/08/29 09:19] (aktuell) – kdemirci | ||
|---|---|---|---|
| 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 ==== | ||