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


AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine “Ladeschnecke” (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im “beforeLoad”-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im “complete”-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014

JavaScript, HTML5 & Angular Days 2016

Autor: Benedikt Keller


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


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights: “Dem Benedikt seine Highlights” CSS3 Flexbox Der Style “display: flex;” ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, …


Beitrag lesen
28.
Nov.
2016

Apple Touch Icons nutzen

Autor: Bastian Schwarz


Projekte // Technologie // User Experience & Design


Ich habe mal ein wenig recherchiert und möchte hier das Ergebnis mitteilen. Die Apple Touch Icons können generell benutzt werden um Apps oder Webseiten auf z.B. den Startbildschirm zu pinnen. Ist bei der Webseite dann ein solches Icon hinterlegt wird das “Lesezeichen” mit ihm hinterlegt und man erhält so einen schönen Wiedererkennungswert. Generell sollten die …


Beitrag lesen
17.
Oktober
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