Kapitel 11. Flexibles Box-Layout
Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com
Das CSS Flexible Box Module Level 1, kurz flexbox, macht das Layout bestimmter Seiten, Widgets, Anwendungen und Galerien zu einem Kinderspiel. Mit flexbox brauchst du oft kein CSS-Framework. In diesem Kapitel lernst du, wie du mit nur wenigen CSS-Zeilen fast alle Funktionen deiner Website erstellen kannst.
Flexbox-Grundlagen
Flexbox ist eine einfache und leistungsstarke Methode, um Seitenkomponenten anzuordnen, indem es vorgibt, wie der Platz verteilt, der Inhalt ausgerichtet und die Elemente visuell angeordnet werden. Inhalte lassen sich ganz einfach vertikal oder horizontal anordnen und können entlang einer einzigen Achse oder über mehrere Zeilen verteilt angeordnet werden. Und vieles, vieles mehr.
Mit Flexbox kann das Aussehen des Inhalts unabhängig von der Reihenfolge der Quelle sein. Auch wenn das Aussehen verändert wird, sollten sich die Flexbox-Eigenschaften nicht auf die Reihenfolge der Inhalte auswirken, die vonScreenreadern gelesen werden.
Warnung
Die Spezifikationen besagen, dass Screenreader der Quelltextreihenfolge folgen sollten, aber seit Ende 2022 folgt Firefox der visuellen Reihenfolge. Derzeit wird vorgeschlagen, eine CSS-Eigenschaft hinzuzufügen, die angibt, ob die Quelltextreihenfolge oder die visuelle Reihenfolge befolgt werden soll, sodass du vielleicht bald selbst entscheiden kannst.
Am wichtigsten ...