Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| modul:m287:learningunits:lu04:flexbox [2025/03/21 07:19] – kdemirci | modul:m287:learningunits:lu04:flexbox [2025/03/21 07:24] (aktuell) – kdemirci | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== | + | ====== |
| - | ===== CSS Display ===== | ||
| - | Die CSS-Anweisung " | ||
| - | |||
| - | ==== Die verschiedene Display-Werte ==== | ||
| - | Die Auswahl des richtigen " | ||
| - | |||
| - | ^ Wert ^ Beschreibung ^ | ||
| - | | **block** (Block-Element) | Block-Elemente nehmen die gesamte verfügbare Breite ihres übergeordneten Elements ein und beginnen auf einer neuen Zeile. Beispiele für Block-Elemente sind `< | ||
| - | | **inline** (Inline-Element) | Inline-Elemente nehmen nur so viel Breite wie nötig ein und bleiben im selben Absatz oder auf derselben Zeile wie benachbarte Inline-Elemente. Beispiele für Inline-Elemente sind `< | ||
| - | | **inline-block** (Inline-Block-Element) | Kombiniert Eigenschaften von Block- und Inline-Elementen. Es nimmt nur so viel Breite wie nötig ein und kann dennoch mit anderen Inline- oder Block-Elementen in derselben Zeile stehen. Häufig verwendet für Elemente, die als Block formatiert werden müssen, aber in einer Zeile bleiben sollen, z. B. `< | ||
| - | | **none** (Ausgeblendetes Element) | Das Element wird nicht gerendert und nimmt keinen Platz in der Layout-Struktur ein. Es ist praktisch, um Elemente auszublenden oder dynamisch zu verbergen. Verwendet für Elemente, die vorübergehend nicht angezeigt werden sollen, z. B. auf verschiedenen Browsergrössen. | | ||
| - | | **flex** (Flexbox-Element) | Aktiviert das Flexbox-Layoutmodell für das Element, mit dem Sie flexible Layouts erstellen können, indem Sie den Inhalt auf verschiedene Weise anordnen und ausrichten. Flexbox ist besonders nützlich, um komplexere Layouts zu erstellen und das Responsiveness von Websites zu verbessern. | | ||
| - | | **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 [[https:// | ||
| - | |||
| - | ===== CSS Flexbox ===== | ||
| CSS Flexbox ist ein leistungsstarkes Layoutmodell in CSS, das entwickelt wurde, um das Design von Webseiten und Webanwendungen zu vereinfachen und flexible, dynamische Layouts zu ermöglichen. Es bietet eine effiziente Möglichkeit, | CSS Flexbox ist ein leistungsstarkes Layoutmodell in CSS, das entwickelt wurde, um das Design von Webseiten und Webanwendungen zu vereinfachen und flexible, dynamische Layouts zu ermöglichen. Es bietet eine effiziente Möglichkeit, | ||
| - | ==== Grundkonzept ==== | + | ===== Grundkonzept |
| 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 |
| ^ Eigenschaft ^ Beschreibung ^ | ^ Eigenschaft ^ Beschreibung ^ | ||
| | flex-direction | Bestimmt die Richtung der Hauptachse. Mögliche Werte sind: row, row-reverse, | | flex-direction | Bestimmt die Richtung der Hauptachse. Mögliche Werte sind: row, row-reverse, | ||
| Zeile 33: | Zeile 16: | ||
| | align-content | Steuert die Ausrichtung und Verteilung mehrerer Zeilen von Items entlang der Querachse. | | | align-content | Steuert die Ausrichtung und Verteilung mehrerer Zeilen von Items entlang der Querachse. | | ||
| - | ==== Eigenschaften des Items ==== | + | ===== Eigenschaften des Items ===== |
| ^ Eigenschaft ^ Beschreibung ^ | ^ Eigenschaft ^ Beschreibung ^ | ||
| | order | Ändert die Reihenfolge der Items innerhalb des Flex-Containers. Items mit einer niedrigeren Reihenfolge werden zuerst angezeigt. | | | order | Ändert die Reihenfolge der Items innerhalb des Flex-Containers. Items mit einer niedrigeren Reihenfolge werden zuerst angezeigt. | | ||
| Zeile 42: | Zeile 25: | ||
| | align-self | Überschreibt die Ausrichtungsvorgaben des Flex-Containers für ein einzelnes Flex-Item. | | | align-self | Überschreibt die Ausrichtungsvorgaben des Flex-Containers für ein einzelnes Flex-Item. | | ||
| - | ==== Ressourcen ==== | + | ===== Ressourcen |
| * [[https:// | * [[https:// | ||
| * [[https:// | * [[https:// | ||