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


lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23.
Sep.
2016

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

Bilder SEO – Bisher eigentlich komplett vernachlässigt

Autor: Axel Güldner


Technologie // User Experience & Design


Heute möchte ich ein Thema anschneiden, welches bisher wohl so niemand auf dem Schirm hatte (ich zumindest habe bisher keinen Gedanken daran verschwendet). Aber als ich dann in einem anderen Blog darüber gelesen habe, hat mich dann sofort die Faust der Erkenntnis getroffen, ähnlich einer Brockhaus-Enzyklopädie, die einem ins Gesicht fällt. Wir bemühen uns immer …


Beitrag lesen
07.
Februar
2012

Gewinnspiel: Praxisbuch Usability und UX

Autor: Christine Pfleger


Projekte // Strategie & Konzeption // User Experience & Design


Praxisbuch Usability und UX, Verlag Rheinwerk Computing
Praxisbuch Usability und UX, Verlag Rheinwerk Computing

GEWINNSPIEL! Die dritte Ausgabe unseres Magazins gråd extra ist soeben erschienen! In diesem Zusammenhang verlosen wir ein druckfrisches Exemplar des „Praxisbuch Usability und UX: Was jeder wissen sollte, der Websites und Apps entwickelt – Bewährte Methoden praxisnah erklärt“ von Jens Jacobsen und Lorena Meyer. Das „Praxisbuch Usability und UX“ gibt einen Überblick über bewährte Methoden des …


Beitrag lesen
22.
Dez.
2017