Display Flex

Philip Dumas Datum: 13. Juli 2016
Autor: Philip Dumas


Folgende Problemstellung:

Mobile Navigationsdarstellung in Tirol. Es soll sich die Reihenfolge der Navigationselemente im Vergleich zur Desktopvariante ändern. Desweiteren soll beim Klick auf die Lupe die Volltextsuche unter der Navigation ausklappen und die volle Bildschirmbreite benutzen. Die Navigation ist hierbei eine “ul”, die einzelnen Navigationselemente “li”s.

Weisst man dem Suchformular hier nun width:100% zu, so bezieht sich dies auf das Listenelement darüber und die Suche hängt unmotiviert in der Mitte des Screens unter der Lupe.

Lösung:

Der “ul” wird “display:flex” zugewiesen. Allen “li”s werden eventuell vorhandene “position” Anweisungen genommen und es wird für die Positionierung der “li”s im css ein “order” tag zugewiesen (order:1 order:2 etc.). Es ist darauf zu achten ,dass auch wirklich ALLE “li”s einen solchen order tag erhalten. Dann werden die Listenelemente in aufsteigender Reihenfolge anhand ihrer Order-Tags angeordnet, hat ein Element keine Order Anweisung, wird es automatisch an den anfang der Liste gestellt.

Nun kann dem Formular unter dem “li” width:100% zugewiesen werden und es bezieht sich tatsächlich auf die “ul”.

Umgesetzt so unter tirol.at.

Kommentare

Benedikt Keller

Benedikt Keller

– 13. Juli 2016 / 16:41

Hast Du da ein paar Code-Beispiele? Das würde den Beitrag noch veranschaulichen…

Michael

– 14. Juli 2016 / 11:09

Das Flexbox-Modell ist ein tolles Instrument, und kann einem viel Arbeit und Ärger ersparen. Mittlerweile wird es auch von fast allen modernen Browser unterstützt. Allerdings gibt es noch keinen verabschiedeten Standard und die Spezifikation hat sich in der Vergangenheit mehrmals geändert. D.h. wenn ältere Browser (< IE11, < Android 4.4, etc) berücksichtigt werden sollen, muss das Ganze entsprechend getestet und ggf. entsprechende Fallback-Strategien einbezogen werden.

Selber kommentieren:






Weitere Beiträge zum Thema User Experience & Design


iOS Probleme mit transition

Autor: Florian Müller


Technologie // User Experience & Design


Heute ist mir bei einem Projekt ein Problem mit iOS begegnet. Es gibt eine Galerie, bei welcher die Elemente von oben “hereinfliegen”. Auf dem iPad und dem iPhone war dieser Effekt kaum beziehungsweise gar nicht vorhanden, sondern das Bild war einfach *plopp* da. Problem hierbei ist, dass transitions bei iOS ohne Hardware Beschleunigung gerendert werden. …


Beitrag lesen
28.
Sep.
2016

BookBlock – A Content Flip Plugin

Autor: Benjamin Hofmann


User Experience & Design


Dank dem Newsletter vom Smashing Magazine bin ich eben über ein sehr cooles Galerie-Plugin gestoßen, welches nicht nur mit Bildern, sondern auch mit komplexeren Strukturen umgehen kann und diese wie ein Buch blätterbar gestaltet. Das Ganze nennt sich BookBlock und kann hier genauer unter die Lupe genommen werden.


Beitrag lesen
25.
Sep.
2012

http://webplatformdaily.org/

Autor: Bastian Schwarz


Technologie // Über den Tellerrand // User Experience & Design


Ich habe eine neue Seite (http://webplatformdaily.org/) entdeckt, die täglich Links zu folgenden Themen aus Twitter sammelt: Open Web Platform (including the open standards that comprise it) JavaScript (the core language and libraries written in it) web-browsers (including their development tools) front-end web-development in general open source to some degree (e.g. GitHub related content) Das Projekt …


Beitrag lesen
09.
April
2013

font-face rendering Problem

Autor: Steven Schöning


User Experience & Design


Vielen ist bestimmt bekannt, dass Schriftarten auf Mac oder iOS anders dargestellt werden. Hier gab es einen Interessanten Beitrag, der sich mit dem Problem befasst und es einfach löst. Ihr müsst einfach diesen Styling hinzufügen: -webkit-font-smoothing: antialiased; Laut der Quelle ist es nicht möglich den Styling Global auf den body zu setzen, doch anscheinend ist …


Beitrag lesen
24.
August
2016