mixmastertobsi: CSS Flex gleiche breite

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

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. 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.

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

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. @@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 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. @@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 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. @@Gunnar Bittersmann

            Nachtrag: Geht auch mit Text.

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

            LLAP 🖖

            -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. @@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 🖖

              -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. 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

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

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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

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

              -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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

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

                  -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                  1. 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

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

          Rolf

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

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

              -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory