CSS/Tutorials/Flexbox/Warum Flexbox?

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Flexbox
Wechseln zu: Navigation, Suche

HTML ist an sich eigentlich schon responsiv. Block-Elemente nehmen von sich aus im Standardwert display: block die volle Breite der Webseite ein und ziehen sich auf schmalen Viewports zusammen. Überstehender Inhalt wird umgebrochen und in einer neuen Zeile dargestellt. Die Probleme beginnen, wenn Elemente nebeneinander dargestellt werden sollen.

Von der Unmöglichkeit pixelgenaue Layouts zu entwerfen

Der Versuch pixelgenaue Layouts zu erstellen, indem Breiten, Randstärken und Abstände zusammengerechnet wurden, war auch früher schon nahezu unmöglich und wurde durch den Box-Model-Fehler des Internet Explorers weiter verkompliziert.

Viewportauflösungen heutiger Geräte
Quelle: https://opensignal.com/reports/fragmentation.php

Auch wenn es möglich ist, mit media queries unterschiedliche Viewportbreiten abzufragen, gibt es keine idealen, allgemeingültigen Breakpoints. Heutzutage gehen die meisten Nutzer mit mobilen Geräten mit allen möglichen Abmessungen ins Internet.

Für welche Geräte muss ich wann Breakpoints setzen?

So oder ähnlich lauten viele Fragen im Forum. Die Antwort darauf lautet: "Gar nicht!"

Derzeit aktuelle Geräteauflösungen können morgen schon überholt sein. Richten Sie lieber die Breakpoints am Inhalt aus:

  • Überlegen Sie sich, ab wann dieser bei einer bestimmten Viewportbreite nicht mehr gut aussieht.

Voila Flexbox!

Browserunterstützung
caniuse.com

Hier bietet Flexbox eine Lösung, die gegenüber dem Block Layout des Box-Modells flexibel ist.

Mit Flexbox …

  • kann die Fließrichtung frei bestimmt werden
  • können Elemente innerhalb einer Zeile oder mittels Umbrüchen in mehreren Zeilen angeordnet werden
  • erhalten Elemente flexible Größen, die sich am Viewport ausrichten
  • können Elemente abweichend von der Reihenfolge im Markup positioniert werden.

Wenn die Breite des Viewports für ein horizontales Mehrspaltenlayout nicht mehr ausreicht, kann die Richtung der Anordnung per media queries auf eine vertikale Anordnung umgestellt werden.


Hinweis:
Die Spezifikationen zu Flexbox wurden mehrfach geändert. Wenn Sie im Internet Code-Beispiele mit der Eigenschaft
  • display: box; oder
  • display: flexbox; finden, dann ist dieser Code veraltet.

Code nach der neuen, gültigen Spezifikation kann man durch:

  • display: flex; und flex-{*} erkennen.


Flexbox oder Grid Layout?

Jeffrey Zeldman empfiehlt den Einsatz von Grid Layout, wenn ein Layoutraster erstellt werden soll, von Flexbox, wenn bestehende Inhalte ein Layout erhalten sollen.[1]

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

„Flexbox dient im Wesentlichen dem Layout von Objekten in einer Zeile oder einer Spalte. Grid ist für ein Layout in zwei Dimensionen - Zeilen und Spalten.“ Rachel Andrew[2]

Weblinks

  1. ↑ Jeffrey Zeldman auf Twitter
  2. ↑ Rachel Andrew: Should I use Grid or Flexbox?
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Flexbox/Warum_Flexbox%3F&oldid=95598“