Flexbox
Die flexiblen Boxen (Flexbox) bieten eine neue Alternative zu Floats oder Layouten mit Inline-Block-Elementen.
Flexbox: Magic Rainbow Unicorns
topic 01
Floats vs. Flexbox
Im letzten Jahrzehnt waren floats fast die einzige Möglichkeit, ein komplexes Layout für eine Website zu entwickeln. Durch die weite Verbreitung von floats ergibt sich die gute Browserunterstützung. Ursprünglich wurden floats entwickelt, um klassisch Text um Bild fließen zu lassen.
Flexbox Overview
Flexbox verwendet zwei Arten von Boxen: „flex containers“ und „flex items“. Die Aufgabe der Container ist, die Items zu gruppieren. Jedes HTML-Element, welches ein direktes Kind des Flex Containers ist, ist ein Flex Item.
Flex Containers
First Step: display-Eigenschaften eines HTML-Elements ändern.
Neue Eigenschaft und neuer Wert: display: flex;
Flex Items ausrichten
Next Step: Definition der horizontalen Ausrichtung der Items mit
der Eigenschaft justify-content
Werte für justify-content:
flex-start, center, flex-end,
space-around, space-between
Note: justify-content: center; hat den gleichen Effekt wie margin: 0 auto;
Mehrere Flex Items verteilen
Mit floats kann man Elemente links oder rechts ausrichten und mit auto-margins die Elemente zentrieren.
Flexbox zeigt seine Stärke erst, wenn sich mehrere Items in einem Container befinden.
Mit justify-content können Items innerhalb eines Containers gleichmäßig verteilt werden.
Flex Items gruppieren
Flex Container positionieren nur die Elemente, die ein Level tiefer sind – also die Kindelemente. Gruppierung ist eine zusätzliche Option für die Entwicklung eines spannenden Layouts.
Links, rechts oder oben, unten?
topic 02
Vertikale Ausrichtung
Flex Container können Flex Items nicht nur horizontal ausrichten, sondern auch vertikal. Eine Eigenschaft, die mit floats schlicht nicht möglich ist.
Note: Horizontale Ausrichtung mit justify-content: …,
vertikale Ausrichtung mit align-items: …
Die vertikale Ausrichtung wird „cross-axis alignment“ genannt.
Werte für align-items (ähnlich wie justify-content):
flex-start (top), center, flex-end (bottom),
stretch, baseline
Wrapping Flex Items
Flexbox ist eine mächtige Alternative zu „float-based grids“. Um ein Flexbox-grid zu erstellen,
wird die Eigenschaft flex-wrap benötigt.
History of web design
in a nutshell
Back to the roots? Flat Design (2010)
Je mehr Layouts man entwerfen muss, desto besser fährt man damit, sich auf das Wesentliche zu konzentrieren: Weniger tolle Animationen und Effekte, mehr Fokus auf die Inhalte. In Sachen modernes Webdesign bedeutet das: Hochwertige Fotos, durchdachte Typografie, klare Illustrationen und kluge Layouts. Zu dieser Entwicklung gehört auch das Flat Design, bei dem visuelle Elemente auf ihre wesentliche Funktion reduziert werden: Glänzende Buttons werden ersetzt durch Icons, für die man skalierbare Vektorgrafiken und Icon-Fonts verwenden kann, Web-Fonts sorgen für wunderschöne Typografie. In gewisser Weise liegt in der Besinnung auf simples, funktionales Design eine Rückkehr zu den frühen Zeiten des Webdesigns, als technisch einfach noch nicht viel mehr möglich war: Back to the roots, sozusagen – nur schöner.
In welche Richtung geht’s weiter?
topic 03
Flex Container Direction
Alignment Considerations
Flex Container Order
Flex Item Order
Flex Item Alignment
Noch zu wenig flexibel?
topic 04
Flexible Items
Static Item Widths
Flex Items und auto-margins
Summary