CSS Flex gleiche breite

[marctrix]

Hej Gunnar,

@@marctrix

Warum ohne media-queries?

Weil sich das nach der Breite des Containers, nicht des Viewports richten sollte? In dem Fall kann ich den Ruf nach element queries durchaus nachvollziehen.

Ich fände es auch gut, wenn man Informationen über das Eltern-Element als Bedingung heranziehen könnte.

Generell habe ich aber auch immer etwas Probleme mit solchen Layout-Wünschen wie hier: die Möglichkeiten mit Flexbox, Grid, float usw sind inzwischen sehr umfangreich - all diese Boxen können ja auch noch text-Spalten enthalten usw

Generell ist es selten nötig und oft auch nicht sinnvoll mehr als zwei Elemente nebeneinander zu stellen - aus Nutzersicht.

Seitenbetreiber wollen gerne möglichst viel Zeugs einem Nutzer unter die Nase reiben - am besten alles innerhalb einer winzig kleinen Fläche mittels Akkordeons, Slidern, hinter Hamburger-Icons versteckten Menüs (jetzt auch vermehrt in der Desktop-Ansicht zu finden).

Nutzer fühlen sich von der Masse an Informationen und Bedienelementen aber oft erschlagen und wenn etwas zu kompliziert ist, reagieren sie gerne mit einer kompletten 180°-Wende - zurück zur SRP der Suchmaschine ihres Vertrauens.

Ich kann mir ehrlöich gesagt nicht vorstellen, dass das vom OP gewünschte notwendig ist - auch wenn es als Fingerübung ein nettes Problem ist.

So was sollte es idR tun:

.grid {display: flex;}
.grid > * {flex: 1 0 15em;}

Zu Deinem Hinweis, man kenne die Breite des Elternelementes nicht - doch in der Regel kann man ganz profan ausprobieren, ab welcher Viewport-Breite der Inhalt anders (z.B. dreispaltig statt einspaltig) dargestellt werden soll. Mache ich seit Aufkommen von RWD so und suche mir dann einen bereits verwendeten Breakpoint "in der Nähe" des durch ausprobieren ermittelteten Wertes. Klappt prima.

Marc