Problematische Seite

[MrMurphy1]

Hallo

die Frage warum

Das sind Erfahrungswerte, die ich durch Ausprobieren ermittelt habe. Die mir bekannten Anleitungen zu Flexbox umgehen solche Praxisprobleme leider. Sei es, weil die Autoren Theoretiker sind oder weil sie die Probleme zwar erkennen, aber selbst keine Lösung haben und sie deshalb verschweigen.

Ich bin eher ein Praktiker und deshalb an der Theorie weniger interessiert. Deshalb weiß ich auch nicht ob es sich um Fehler von Flexbox handelt oder das Verhalten so gewollt ist.

flex-basis 40%

Flexbox hat unabhängig vom gewählten Box-Modell wohl einige Eigenheiten mit der Behandlung von width/height, padding, border und margin.

Wenn zwei Container nebeneinander dargestellt werden sollen funktioniert dies mit flex-basis:50% im Zusammenspiel mit flex-wrap:wrap in der Praxis meist nicht. Der Wert muss so vorgegeben werden, dass höchstens zwei Container nebeneinander passen, aber eventuelle Abstände nicht dazwischenfunken. Also ein Wert zwischen 34% und 49%.

Ich habe mit den 40% die besten Erfahrungen gemacht. Dadurch rutschen immer zwei Container nebeneinander und werden durch das flex-grow:1 auf die gesamte Zeile vergrößert.

Wenn drei Container nebeneinander stehen sollen wähle ich einen Wert zwischen 26% und 33%. Und so weiter.

min-width 0

Dazu habe ich weniger Erklärungen, den Wert habe ich durch Ausprobieren ermittelt.

Ich bin bereits längere Zeit ein Fan von Flexbox. Dabei habe ich festgestellt, dass Grafiken innerhalb von Flexbox-Items meist nicht richtig skaliert werden. Entweder sie skalieren überhaupt nicht und es muss seitwärts gescrollt werden. Oder sie skalieren nicht probportional, sondern nur in der Breite.

Deshalb habe ich mich vor längerer Zeit einfach mal hingesetzt und ausprobiert, wie den Bildern in Flexbox-Items das Skalieren beigebracht werden kann. Dabei bin ich darauf gestoßen, dass die Angabe von min-width für die Flex-Items Abhilfe schafft.

Zunächst mit größeren Werten. Die mussten aber immer wieder für jede Webseite angepasst werden. Das nervt natürlich auf Dauer. Deshalb habe ich die Werte immer weiter verringert und dann zu dem Ergebnis gekommen, das min-width:0 vollkommen ausreicht. Die Flex-Items benötigen wohl nur den Hinweis, sich überhaupt mit min-width zu beschäftigen, damit sie in ihnen enthaltene Bilder proportional skalieren können.

Flexbox-Items sind die direkten Kind-Elemente von Flexbox-Containern.

Gruss

MrMurphy