Tag:  Flex

Warum Flex?

Flexbox ist eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen. Dabei kann nicht nur die Größendarstellung, sondern auch die Reihenfolge der Elemente unabhängig vom HTML-Code durch CSS festgelegt werden.

Quelle: wiki.selfhtml.org

Can i use it?

Die wichtigste Frage beim Einsatz moderner Webtechnologien ist: can i use it?

Für 2017 sagt caniuse für Flexbox eine Verbreitung zwischen 87.97% und 97.72% aus.

Das reicht mir für meine private Homepage vollkommen aus. Für kommerzielle Seiten kann dies ganz anders aussehen und hängt u.a. auch von der Zielgruppe und deren vorhandenes Equiment aus.

Vorteile?

  • Einfache , wenig Code, responsive, flexibles Layouts.
  • Wird gut unterstützt.
  • Mein Hauptgrund Flexbox zu nutzen ist, dass man damit kleine Seiten ohne viel CSS und HTML erstellen kann. Mit der zunehmenden Bedeutung von Mobil sind schlanke Seiten und weniger CSS gefragt. Mehr dazu auf Warum Hugo? .

Nachteil?

  • Noch keine 100% Verbreitung.
  • Verschachtelung schwieriger. Der Trend geht aber ohnehin zu einfacheren Seiten, so dass dieser Nachteil kaum ins Gewicht fällt.

Warum nicht Bootstrap oder ein anderes Toolkit?

Bootstrap ist ein extrem mächtiges und gutes Toolkit für responsive und mobil first Seiten.

Die vorherige Version meiner Homepage hat auf Bootstrap basiert und gut funktioniert.

Aber ich habe mich immer gefragt, geht das für meine Zwecke nicht schlanker? Ohne Toolkit, ohne JavaScript und ohne https://jquery.com/ ? Und für mich und diese Homepage lautet die Antwort: Ja mit Flexbox.

Für kommerzielle Seiten kann dies ganz anders aussehen und Bootstrap und JQuery sind tolle Produkte. Allerdings glaube ich, dass auch und gerade für kommerzielle Seiten der Zwang zu immer schlankeren Seiten zunimmt. Die Nutzer sind bei mobiler Nutzung nicht gewillt lange zu warten.

Nachtrag

Bootstrap 4 setzt jetzt auch auf Flexbox.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox/Ausrichtung