Probleme mit Flexbox

[marctrix]

Hej Lars,

du hattest gesagt du würdest für mich mitdenken und das Angebot muss ich wohl leider annehmen. Ich habe anstelle der problematischen Seite das ungefähre Layout verlinkt. (Zumindest so wie ich es mir vorstelle).

Darf ich da gleich einhaken und ein paar Gedanken zu äußern?

Das Menü steht in der Regel nicht mehr links, sondern rechts (siehe z.B. www.ble.de. Das hat praktische Gründe, Gründe der Usability, des Marketings und technische.

Praktisch und technisch

es ist leicht, das Menü rechts unter den Hauptinhalt (was man in der Regel möchte, dazu gleich mehr) zu bringen und dabei eine korrekte Tastaturreihenfolge einzuhalten.

Usability

Der Nutzer ist in der Regel auf einer Seite gelandet, die ihn interessiert. Wenn er damit fertig ist (weil er den Text komplett gelesen hat oder nach einer Weile abbricht, weil er vermutet, die gewünschte Info nicht mehr zu finden) sucht er nach weiteren Orten auf der Site, wo sich die Informationen befinden könnten - weiter (hinten) ist in unserem Kulturraum wo man von oben nach unten, von links nach rechts liest ebens recht oder unten oder rechts unten.

Marketing

Weil man bei uns in dieser Reihenfolge liest, schaut man auf einer neuen Seite zuerst oben links in die Ecke und sucht dort den Anfang eines Textes (Man spricht vom goldenen Dreieck). Deswegen habe Marketing-Leute da gerne einen Hinweis auf eine Aktion, ein besonders anzupreisendes Produkt o.ä.

Schade, den Platz ständig fest für ein Menü zu belegen.

Das gleichmäßige Aufteilen der Menueinträge per Flexbox gelingt mir noch. Zur Zeit scheitert es bei dem freien Platz für die untermenus. Wie bekomme ich es hin, dass er bei ausreichendem Viewport links ist und bei zu kleinem Viewport direkt unter dem Hauptmenu? 😕

Mit entsprechenden Werten für flex-basis für die Kinder und Flex−wrap: wrap für den Container — probier mal mit Werten (in em) ein bisschen rum. Dann wirst du sehen, was ich meine.

Guck mal hier, was alles möglich ist "Complete Guide to Flexbox"

Bzw. fürs erste wie halte ich den Platz links generell frei? 😨

margin-left 😉

Marc