Probleme mit Flexbox

[Lars]

Hallo alle zusammen,

ich habe mich lange davor gedrückt, aber ihr habt mir geraten mich mit Flexboxen zu befassen → Das habt ihr jetzt davon ... 😜

Wie bereits angedeutet schreibe ich die Seite jetzt einmal komplett neu (auch um die Div-Suppe los zu werden). Und möchte die Seite dann auch möglichst an alle Viewports anpassen, allerdings sollten die <li>-Elemente in der Navigation sich den Platz untereinander aufteilen. So wie ich das sehe sollte das doch mit justify-content:space-around; eigentlich passen oder nicht? ⇒ Hier hat es ja auch funktioniert.

Was übersehe ich hier? Gruß Lars

P.S. Ich habe den Thread mal allgemein gehalten, da kommt warscheinlich noch mehr 😏

[beatovich]

hallo

Was übersehe ich hier?

ul {width: 100%;}

[marctrix]

Hej beatovich,

hallo

Was übersehe ich hier?

ul {width: 100%;}

Fast: der Wert für die Listenbreite ist ohnehin schon auto, also so breit wie das Elternelement abzüglich margin, border und so einen Kram. Das auf 100% zu ändern führt nur zu Problemen — es sei denn man hat sinnvolle allgemeine Regeln in seinem CSS, wie

*, *::before, *::after {
  box-size: border-box;
}

Ist aber gar nicht nötig, denn das ist wie gesagt eh schon Standard bei Block-Elementen wie ul oder nav.

ul ist also bereits so breit wie sein Elternelement erlaubt.

Das Elternelement ist nav. Und das ist bereits schmal. Wie kommt es, wenn navdoch ein Block-Element ist?

Das liegt daran, dass header ein display: flex mitgegeben wurde (unnötigerweise, jedenfalls so weit das bisherige Layout solche Schlüsse zulässt).

Dadurch wird nav implizit zu einem flex-item.

Es muss also lediglich darauf verzichtet werden, aus header eine Flexbox zu machen.

Marc

[beatovich]

hallo

Was übersehe ich hier?

ul {width: 100%;}

Fast:

Es ist ausreichend, der Aussage zu widersprechen, und den Fragesteller zu versichern, dass die flex-eigenschaften durchaus wie intendiert angewendet werden.

[marctrix]

Hej beatovich,

Was übersehe ich hier?

ul {width: 100%;}

Fast:

Es ist ausreichend, der Aussage zu widersprechen, und den Fragesteller zu versichern, dass die flex-eigenschaften durchaus wie intendiert angewendet werden.

Dann mach das so.

Ich mache, wie ich es für ausreichend halte. Ich hoffe, die Erklärungen werden Lars weiterbringen, darum hat es mir nicht ausgereicht, das zu sagen, was du vorgeschlagen hast. Es geht ja hier in diesem Thread nciht um Dein Problem, sondern um das von Lars.

Das „fast“ sollte ausdrücken, dass du auf dem richtigen Weg warst (übergeordnete Elemente sind zu schmal). Das schien mir freundlicher, als ein „Stimmt nicht“ — und zutreffender.

Marc

[Lars]

Dann mach das so.

Ich mache, wie ich es für ausreichend halte. Ich hoffe, die Erklärungen werden Lars >weiterbringen, darum hat es mir nicht ausgereicht, das zu sagen, was du vorgeschlagen hast. Es >geht ja hier in diesem Thread nciht um Dein Problem, sondern um das von Lars.

Ja danke geholfen hat das sehr, aber das was ich mir vorgestellt hatte war die Lösung von @Gunnar Bittersmann .

Das liegt daran, dass header ein display: flex mitgegeben wurde (unnötigerweise, jedenfalls so weit das bisherige Layout solche Schlüsse zulässt).

Wenn alles einmal fertig ist soll sich das Logo über das Menu stellen, falls der Viewport zu klein wird und dafür muss es aber eine Flexbox sein (soweit ich das verstanden habe).

Gruß Lars

Man muss aber auch so vieles beachten 😨

[marctrix]

Hej Lars,

Ja danke geholfen hat das sehr, aber das was ich mir vorgestellt hatte war die Lösung von @Gunnar Bittersmann .

Manchmal führen mehrere Wege zum Ziel — welcher der beste ist, hängt vom Design ab, das wir noch nicht kennen.

Das liegt daran, dass header ein display: flex mitgegeben wurde (unnötigerweise, jedenfalls so weit das bisherige Layout solche Schlüsse zulässt). Wenn alles einmal fertig ist soll sich das Logo über das Menu stellen, falls der Viewport zu klein wird und dafür muss es aber eine Flexbox sein (soweit ich das verstanden habe).

Worte, Inline- und inline-Block-Elemente (also Texte und Bilder in deinem Fall), brechen eh um, wenn der Platz nicht reicht.

Wenn du möchtest, dass da Logo ab einer bestimmten Breite (man beginnt immer mit dem kleinsten Bildschirm) neben dem Text steht, geht das. Wie gesagt: ob dann Flexbox die beste Technik ist, liegt daran, was für ein Ergebnis du dir wünschst (wie groß soll der Bereich um da Logo sein, wie soll der text daneben aussehen, was soll passieren, wenn der mehrzeilig ist oder darf er das nie sein, soll er oben, mittig oder unten bündig zum Logo sein usw - da gibt es noch mehr Möglichkeiten).

Man muss aber auch so vieles beachten 😨

Vermutlich hast du noch nicht einmal alles bedacht. 😂

Ist so, aber dafür wird es dann am Ende auch gut! Und wir denken ja mit!

Marc

[Lars]

Hi @marctrix ,

Worte, Inline- und inline-Block-Elemente (also Texte und Bilder in deinem Fall), brechen eh um, wenn der Platz nicht reicht.

Naja mir ging es hauptsächlich darum, dass das Layout sich anpasst (etwas schmaler und dafür länger) falls die Seite über ein Handy aufgerufen wird und dafür wird auf mehreren Seiten quasi uni-sono Flexbox empfohlen. Abgesehen davon würde ich mir wünschen, dass die Menü-Einträge dann auch untereinander stehen, statt nebeneinander. Beispiele dafür gibt es ja genug.

Vermutlich hast du noch nicht einmal alles bedacht. 😂

Ich habe das gefühl, dass HTML komplizierter geworden ist seit ich mir die ersten Anfänge vor 8 Jahren während der Schule beigebracht habe. 😟 Aber das liegt warscheinlich daran, dass ich mir nur das angeguckt habe, was ich brauche und jetzt erst lerne was da alle dazu gehört.

Ist so, aber dafür wird es dann am Ende auch gut! Und wir denken ja mit!

ja Gott sei Dank, sonst hätte ich jetzt alles hingeschmissen und es so gelassen wie es war 😂

Gruß Lars

[marctrix]

Hej Lars,

Hi @marctrix ,

Worte, Inline- und inline-Block-Elemente (also Texte und Bilder in deinem Fall), brechen eh um, wenn der Platz nicht reicht. Naja mir ging es hauptsächlich darum, dass das Layout sich anpasst (etwas schmaler und dafür länger) falls die Seite über ein Handy aufgerufen wird und dafür wird auf mehreren Seiten quasi uni-sono Flexbox empfohlen.

Dann liest du die falschen Seiten. Je nach gewünschtem Ergebnis sollte man sich für Flexbox oder grid oder den normalen Elementfluss entscheiden. Auch die Veränderung der display-Eigenschaft zu table, block oder anderem kann sinnvoll sein.

Abgesehen davon würde ich mir wünschen, dass die Menü-Einträge dann auch untereinander stehen, statt nebeneinander. Beispiele dafür gibt es ja genug.

Die Menü-Einträge haben erstens nichts mit dem Namen der Site und dem Logo zu tun und stehen zweitens schon untereinander, ohne dass du eingreifen müsstest. Das ist doch schon Standard für Listenpunkte 😉

Vermutlich hast du noch nicht einmal alles bedacht. 😂 Ich habe das gefühl, dass HTML komplizierter geworden ist seit ich mir die ersten Anfänge vor 8 Jahren während der Schule beigebracht habe. 😟

Jein - umfangreicher. Das heißt, mit HTML kann man nun genauer auszeichnen. Aber das ist eigentlich nicht viel mehr. CSS hat dagegen deutlich zugelegt!

Das gilt aber für fast alles. Auch Photoshop und ms Office kann heute mehr als vor acht Jahren. Menschen sind nie zufrieden, also wird alles immer weiter entwickelt.

Ist so, aber dafür wird es dann am Ende auch gut! Und wir denken ja mit! ja Gott sei Dank, sonst hätte ich jetzt alles hingeschmissen und es so gelassen wie es war 😂

Schön, dass du dir so viel Mühe gibst. Deine Nutzer werden es dir danken (nicht bewusst, sie werden einfach nichts merken, denn merken tut man nur die Steine, über die man stolpert - dass eine Straße Kilometerlang eben ist kriegt niemand mit).

Marc

[Lars]

Hi Marc,

Dann liest du die falschen Seiten. Je nach gewünschtem Ergebnis sollte man sich für Flexbox oder grid oder den normalen Elementfluss entscheiden. Auch die Veränderung der display-Eigenschaft zu table, block oder anderem kann sinnvoll sein.

Auje ... da muss ich erst nachlesen bevor ich sinnvoll antworten kann. 😂

Die Menü-Einträge haben erstens nichts mit dem Namen der Site und dem Logo zu tun und stehen zweitens schon untereinander, ohne dass du eingreifen müsstest. Das ist doch schon Standard für Listenpunkte 😉

Ich finde es aber hübscher, wenn sie (sofern der Platz reicht) nebeneinander ausgerichtet sind 😉

Deine Nutzer werden es dir danken (nicht bewusst, sie werden einfach nichts merken, denn merken tut man nur die Steine, über die man stolpert - dass eine Straße Kilometerlang eben ist kriegt niemand mit).

Schön gesagt 👍.

Gruß Lars

[marctrix]

Hej Lars,

Dann liest du die falschen Seiten. Je nach gewünschtem Ergebnis sollte man sich für Flexbox oder grid oder den normalen Elementfluss entscheiden. Auch die Veränderung der display-Eigenschaft zu table, block oder anderem kann sinnvoll sein. Auje ... da muss ich erst nachlesen bevor ich sinnvoll antworten kann. 😂

Sag uns einfach, wie es aussehen soll, dann können wir dir Tipps für eine gezielte Recherche geben.

Die Menü-Einträge haben erstens nichts mit dem Namen der Site und dem Logo zu tun und stehen zweitens schon untereinander, ohne dass du eingreifen müsstest. Das ist doch schon Standard für Listenpunkte 😉

Ich finde es aber hübscher, wenn sie (sofern der Platz reicht) nebeneinander ausgerichtet sind 😉

Das war meine Antwort darauf, dass die auf kleinen Bildschirmen untereinander sein sollen. 😉

Hübsch ist übrigens nicht so wichtig. Form follows function!

Nebeneinander ist auf jeden Fall sinnvoll.

Dafür reicht aber schon ein display: inline.

Mit inline-block kannst du auch noch horizontale Abstände hinzufügen.

Mit vertical-align richtest du diese Elemente aneinander aus (innerhalb der Zeile, in der sie stehen), mit text-align mittig, Links oder rechtsbündig…. Auch ohne Flexbox geht schon einiges, Browser-Unterstützung bis in die Steinzeit inklusive.

Flexbox benötigst du, wenn du außerdem noch mehr beeinflussen möchtest. Zum Beispiel die Listen-Einträge gleichmäßig über die gesamte Breite verteilen.

Deine Nutzer werden es dir danken (nicht bewusst, sie werden einfach nichts merken, denn merken tut man nur die Steine, über die man stolpert - dass eine Straße Kilometerlang eben ist kriegt niemand mit). Schön gesagt 👍.

Danke 🙏

Von Barrierefreiheit profitieren 100% aller Nutzer, auch wenn es „nur“ für 10% unerlässlich ist und für 30% notwendig.

Marc

[Lars]

Hey Marc,

dann ist es für Flexbox garnicht notwendig die ganze Seite (sprich den body-tag) als Flexbox zu deklarieren?! Heißt das dann könnten auch nur einzelne Teile der Seite als Flexbox ausgerichtet werden? 😕

Flexbox benötigst du, wenn du außerdem noch mehr beeinflussen möchtest. Zum Beispiel die Listen-Einträge gleichmäßig über die gesamte Breite verteilen.

Genau das war aber ja mein wunsch 👍 Im Übrigen auch, dass die Untermenüs (sollen auf der linken Seite stehen) umflossen werden und das soll man ja nicht mehr per <float> machen richtig?

Ich glaube ich fange erstmal mit einem HTML5-Aufbau an und dann mit normalem CSS und alles was ich damit nicht realisieren kann frage ich dann nach 😜.

Gruß Lars

[marctrix]

Hej Lars,

dann ist es für Flexbox garnicht notwendig die ganze Seite (sprich den body-tag) als Flexbox zu deklarieren?! Heißt das dann könnten auch nur einzelne Teile der Seite als Flexbox ausgerichtet werden? 😕

So ist es. Wenn nur die li nebeneinander sollen, braucht das ul ein display: flex

Flexbox benötigst du, wenn du außerdem noch mehr beeinflussen möchtest. Zum Beispiel die Listen-Einträge gleichmäßig über die gesamte Breite verteilen. Genau das war aber ja mein wunsch 👍 Im Übrigen auch, dass die Untermenüs (sollen auf der linken Seite stehen) umflossen werden und das soll man ja nicht mehr per <float> machen richtig?

Flexbox und grid sind zusätzliche Möglichkeiten zu den bestehenden. Sie ersetzen nicht, was es schon gibt. Wenn etwas umflossen werden soll, ist float nach wie vor das Mittel der Wahl!

Ich glaube ich fange erstmal mit einem HTML5-Aufbau an

Unbedingt! Das ist die Grundlage!

und dann mit normalem CSS und alles was ich damit nicht realisieren kann frage ich dann nach 😜.

Gibt es auch unnormales CSS? 😂

Marc

[Lars]

Hi Marc,

und dann mit normalem CSS und alles was ich damit nicht realisieren kann frage ich dann nach 😜.

Gibt es auch unnormales CSS? 😂

Ja alles das wann ich schon kann bzw. kenne ist normales CSS 😂

Anders ausgedrückt ⇒ Wo ich mit meinem Wissen nicht weiter komme frage ich dann 👍

Gruß Lars

[Lars]

Hi Marc,

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).

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? 😕 Bzw. fürs erste wie halte ich den Platz links generell frei? 😨

Gruß Lars

P.S. Ich bin natürlich auch jedem Anderen über Mithilfe und Ratschläge dankbar 😉

[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

[Lars]

Hi Marc,

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

Naja da er links sein sollte wollte ich das jede Seite den selben Aufbau hat. Da das Menu rechts scheinbar mehr Sinn macht wäre es tatsächlich egal 😀.

Der Guide scheint (zumindest beim Überfliegen 😕) recht übersichtlich zu sein. Scheint allerdings auch mehr funktionen zu enthalten, als das Tutorial von SELFHTML. Vielleicht verstehe ich jetzt endlich mal was das mit den Flexboxen alles auf sich hat 😉 (Habe irgendwie das Gefühl, dass ich das noch nicht so komplett verinnerlicht habe.)

Ich werde mich dann (sobald wieder etwas Zeit ist) weiter mit dem Thema beschäftigen und dann weitere Fragen stellen, sofern diese auftreten.

Danke soweit erstmal Lars

[Gunnar Bittersmann]

@@Lars

Was übersehe ich hier?

Dass das nav-Element ein Flexitem der Flexbox header ist und sich so schmal macht wie es sein Inhalt erfordert.
Mit nav { flex: 1 } dehnt es sich über die volle Breite aus.

Außerdem willst du vermutlich mit nav ul { padding-left: 0 } den bei Listen normalerweise für Bullets bzw. Numerierung freigehaltenen Platz weghaben.

(BTW, nav > ul wäre der robustere Selektor.)

Und vermutlich willst du auch nicht space-around, sondern space-between.

P.S. Ich habe den Thread mal allgemein gehalten, da kommt warscheinlich noch mehr 😏

Unbedingt: Deine Schrift ist wegen zu wenig Kontrast zwischen Textfarbe und Hintergrundfarbe kaum lesbar.

LLAP 🖖

[Lars]

Unbedingt: Deine Schrift ist wegen zu wenig Kontrast zwischen Textfarbe und Hintergrundfarbe kaum lesbar.

Die Farbwahl wollte ich erstmal mit unserem Kommando klären (gab einige Beschwerden bei der aktuellen Seite), deswegen erstmal gucken dass alles läuft und dann der Rest 😉

Mit nav { flex: 1 } dehnt es sich über die volle Breite aus.

Hm... ich habe einiges ausprobiert, aber ausgerechnet das natürlich nicht 😏

Außerdem willst du vermutlich mit nav ul { padding-left: 0 } den bei Listen normalerweise für Bullets bzw. Numerierung freigehaltenen Platz weghaben.

Ja, ich habe mich gestern erstmal damit aufgehalten die Einträge zu positionieren, das kommt aber jetzt gleich mit 👍

BTW, nav > ul wäre der robustere Selektor.)

Worin besteht denn der Unterschied zwischen nav ul {...} und nav > ul {...}?

Danke schonmal 👍 Lars

[beatovich]

hallo

Worin besteht denn der Unterschied zwischen nav ul {...} und nav > ul {...}?

nav ul matcht jede Listen Ebene

nav > ul matcht nur ul, die direkte Kinder von nav sind.