CSS Flex gleiche breite

[mixmastertobsi]

Hallo,

wie ist es möglich, dass die Elemente in einer Box alle die gleiche Breite haben, auch wenn das über mehrere Zeilen geht.

Momentan ist es so - Beispiel mit 900 px Breite

Erste Box 300px
Zweite Box 300px
Dritte Box 300px
# neue Zeile #
Vierte Box 900px

Die vierte Box soll also auch 300 px haben. Ich könnte natürlich den Boxen eine Breite von 33% geben, allerdings möchte ich, ich Breite mit min-width angeben, so dass der Browser automatisch einen Umbruch macht, wenn kein Platz mehr zur Verfügung steht.

Beispiel bei 1000 px und min-width: 200px;

Erste Box 250px
Zweite Box 250px
Dritte Box 250px
Vierte Box 250px

[Gunnar Bittersmann]

@@mixmastertobsi

wie ist es möglich, dass die Elemente in einer Box alle die gleiche Breite haben, auch wenn das über mehrere Zeilen geht.

Mit Grid.

LLAP 🖖

[mixmastertobsi]

Hallo, aber in Deinem Beispiel geht es ja nur mit Media queries - oder? Auf diese möchte ich verzichten, sondern mit min-width die Umbrüche steuern.

[Gunnar Bittersmann]

@@mixmastertobsi

Hallo, aber in Deinem Beispiel geht es ja nur mit Media queries - oder? Auf diese möchte ich verzichten, sondern mit min-width die Umbrüche steuern.

Ich weiß nicht, ob es mit Grid ohne Media queries geht. Mit Flexbox stehst du vor dem Problem mit der Breite der Items in der letzten Zeile. Bei max. 3 Spalten ließe sich da was mit Pseudoelementen machen …

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hallo, aber in Deinem Beispiel geht es ja nur mit Media queries - oder? Auf diese möchte ich verzichten

Wenn’s dir um die Rechen-/Schreibarbeit geht: Die könnte man einem CSS-Präprozessor überlassen.

Mit Flexbox stehst du vor dem Problem mit der Breite der Items in der letzten Zeile. Bei max. 3 Spalten ließe sich da was mit Pseudoelementen machen …

… und damit zwei Lücken in der letzten Zeile füllen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hallo, aber in Deinem Beispiel geht es ja nur mit Media queries - oder? Auf diese möchte ich verzichten, sondern mit min-width die Umbrüche steuern.

Ich weiß nicht, ob es mit Grid ohne Media queries geht.

Geht!

Danke an Stefan Baumgartner‏.

Nachtrag: Geht auch mit Text.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nachtrag: Geht auch mit Text.

Noch’n Nachtrag: Geht auch mit Überschrift über volle Breite.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nachtrag: Geht auch mit Text.

Noch’n Nachtrag: Geht auch mit Überschrift über volle Breite.

Und noch einer: Geht auch anders (gerade bei Rachel Andrews gelernt).

LLAP 🖖

[marctrix]

Hej mixmastertobsi,

Hallo, aber in Deinem Beispiel geht es ja nur mit Media queries - oder? Auf diese möchte ich verzichten, sondern mit min-width die Umbrüche steuern.

Warum ohne media-queries?

Hatte eine spontane Idee ganz ohne den "modernen Kram" 😉

Aber ich denke, die erste Lösung von Gunnar mit CSS-Grid ist die sinnvollste. Meine kannst du ja als Fallback für uralt-Browser nehmen…

Marc

[Gunnar Bittersmann]

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

LLAP 🖖

[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

[Gunnar Bittersmann]

@@marctrix

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

Yep. :-(

(jetzt auch vermehrt in der Desktop-Ansicht zu finden).

Was machen diese Entwickler/Produktmanager eigentlich so beruflich?

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.

Klar kann man das. Möchte man aber nicht; single point of failure und so.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

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.

Klar kann man das. Möchte man aber nicht; single point of failure und so.

Den habe ich nicht verstanden... — kannst du dazu bitte etwas mehr sagen, @Gunnar Bittersmann ?

Marc

[Gunnar Bittersmann]

@@marctrix

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.

Klar kann man das. Möchte man aber nicht; single point of failure und so.

Den habe ich nicht verstanden... — kannst du dazu bitte etwas mehr sagen, @Gunnar Bittersmann ?

Wenn das Containerelement über die ganze Breite geht und man die Spalten mindestens 15rem breit haben möchte, setzt man eben Breakpoints bei 30em, 45em, 60em, …

Wenn das Containerelement bei breiteren Viewports aber nur noch 62% der Viewportbreite beansprucht, muss man sich die dann erforderlichen Breakpoints berechnen. Sicher kriegt man das irgendwie hin – hat da aber zwei Einflussfaktoren: 15rem und 62%.

Und zur Verständlichkeit und Wartbarkeit des CSS-Codes dürfte das nicht beitragen.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wenn das Containerelement über die ganze Breite geht und man die Spalten mindestens 15rem breit haben möchte, setzt man eben Breakpoints bei 30em, 45em, 60em, …

Wenn das Containerelement bei breiteren Viewports aber nur noch 62% der Viewportbreite beansprucht, muss man sich die dann erforderlichen Breakpoints berechnen. Sicher kriegt man das irgendwie hin – hat da aber zwei Einflussfaktoren: 15rem und 62%.

Ja, so was kommt vor: ätzend!

Dabei wäre das gerade bei flex-boxen nicht nötig - ich liebe es, wenn Webseiten meinen 21:9-Monitor nutzen. So zum Beispiel: beautylife-bonn.de

Marc

[Rolf b]

Gerade mal angeschaut - da muss noch was dazu. Trag mal in eins der DIVs Text ein...

Rolf

[marctrix]

Hej Rolf,

Gerade mal angeschaut - da muss noch was dazu. Trag mal in eins der DIVs Text ein...

Ja, aber das kann ich nicht vorgeben - kommt auf das gewünschte Ergebnis an.

Ich persönlich würde am liebsten Flexbox verwenden und mit der/den langen Box(en) in der letzten Zeile leben. Das ist einfach, robust und wird dem Medium Web IMHO am ehesten gerecht.

Grid ist - wenn die letzte Reihe mit den oberen identisch sein soll - noch besser geeignet. Dann würde ich flexbox als Fallback einsetzen wegen der größeren Browserunterstützung. Letztes Fallback sind untereinander stehende Kästen…

Marc

[Gunnar Bittersmann]

@@marctrix

Grid ist - wenn die letzte Reihe mit den oberen identisch sein soll - noch besser geeignet. Dann würde ich flexbox als Fallback einsetzen wegen der größeren Browserunterstützung.

?? Grün – soweit das Auge reicht. Ein Extra-Süppchen bloß für Android-Browser? Gibt’s die überhaupt noch?

LLAP 🖖