Anordnung ändern - Mehrere div Elemente in einer Zeile


filament

Erfahrenes Mitglied
#1
Hallo,

ich habe ein Flexbox Layout in dem ich ein Div Container für den Content angelegt habe.

Innerhalb des Containers möchte ich nun einige Boxen mit display: flex in einer Reihe anordnen.

Bei Geräten mit weniger als 500px Breite sollen diese Boxen untereinander angeordnet werden. Das ist auch kein Problem mit Flex-direction: row bzw. column.

Nun möchte ich allerdings das ganze erweitern, sodass bei einer Breite zwischen 501 und 650px die Elemente nicht nur untereinander angeordnet werden sollen, sondern eher wie ein Raster mit jeweils 2 Elementen nebeneinander und dann untereinander weiter. Gibt es hierzu irgendwelche Flexbox Möglichkeiten?

Hier geht es mir nicht darum wie ich per Media Query die Abfragen machen. Ich brauche einfach einen Anstoss, wie ich das Raster realisiere.

Danke für eure Hilfe!

Liebe Grüße
Ronny
 

Sempervivum

Erfahrenes Mitglied
#2
Ich sehe die Möglichkeit, die Elemente mit direction:row nebeneinander anzuordnen, das Wrapping einzuschalten und die Breite auf 50% zu setzen, so dass zwei in eine Reihe passen:
https://jsfiddle.net/xz3w3xyo/2/

Was ich noch nicht verstehe, ist folgendes: Bisher hatte ich mich gefreut, dass man bei Flexlayout Rahmen etc. nicht mehr mit calc in die Breite einrechnen muss wie bei display.:inline-block. Hierbei funktioniert das jedoch nicht: Setze ich einen Rahmen, ordnet er nicht mehr zwei in einer Reihe an, sondern nur noch eins:
https://jsfiddle.net/xz3w3xyo/3/
Damit wieder zwei passen, muss ich die Breite reduzieren.
Vielleicht kann MrMurphy erklären.
 
#3
Hallo

Ich würde grundsätzlich zu diesem HTML

Code:
      <article>
         <section></section>
         <section></section>
         <section></section>
         <section></section>
      </article>
das folgende CSS verwenden

Code:
   @media all {
      article {
         display: flex;
         flex-wrap: wrap;
      }
      section {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: 100%;
      }
   }
   @media only screen and (min-width: 500px) {
      section {
         flex-basis: 50%;
      }
   }
   @media only screen and (min-width: 650px) {
      section {
         flex-basis: 33.33%;
      }
   }
Bei diesem Vorgehen sind die Container immer gleich breit, egal wie viele in einer Spalte stehen.

Falls Container immer die gesamte Spaltenbreite ausfüllen sollen muss flex-grow: 0 durch flex-grow: 1 ersetzt werden, also

Code:
      section {
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: 100%;
      }
Zunächst das CSS für schmale Fenster erstellen und dann das für breitere hinzufügen nennt sich Mobile First und hat sich in der Praxis bewährt.

Für flex-grow, flex-shrink und flex-basis gibt es eine Kurzschreibweise

Code:
flex: 0 1 100%;
mit der aber nicht alle Browser zurechtkommen.

Zudem machen sich viele Webseitenersteller gar keine Gedanken, das eine Kurzschreibweise wie

Code:
flex: 1;
nicht nur Auswirkungen auf die Eigenschaft flex-grow hat, sondern auch auf die nicht aufgeführten flex-shrink und flex-basis.

Deshalb schreibe ich die Werte immer einzeln hin, umgehe damit eventuelle Browserprobleme und sehe die Werte direkt. Mit der von mir verwendeten ausführlichen Schreibweise kommen alle Browser zurecht, die Flexbox kennen. Man kann sich die Schreibweise ja auch abspeichern und dann kopieren.

Bisher hatte ich mich gefreut, dass man bei Flexlayout Rahmen etc. nicht mehr mit calc in die Breite einrechnen muss
Das ist nicht richtig und reelle Anleitungen behaupten das auch nicht. Ich habe das aber leider auch schon des öfteren gelesen.

Ob Abstände berücksichtigt werden müssen oder nicht hängt nur vom Box-Modell (box-sizing) ab.

Standard ist das Content-Box-Modell ( box-sizing: content-box; ). Dabei müssen padding, border und margin berücksichtigt werden.

Mit dem Border-Box-Modell ( box-sizing: border-box; ) muss nur margin berücksichtigt werden.

Wobei bei Flexbox wieder einige Browser das Border-Box-Modell nicht berücksichtigen, auch wenn es vorgegeben wird. Bei Flexbox verwenden diese Browser grundsätzlich das Content-Box-Modell.

Da dagegen kein Kraut gewachsen ist verwende ich bei Flexbox grundsätzlich das Content-Box-Modell. Ansonsten müssten für die Problembrowser immer spezielle Lösungen erstellt werden, wobei mit etwas Pech einige übersehen werden. Mit Verwendung des Content-Box-Modells (also der Standardvorgaber aller Browser) hat man gleich alle Browser unter einem Hut.

Dabei verwende ich die calc-Anweisung für flex-basis in einer ausführlichen, immer gleichen ausführlichen Schreibweise mit den von mir verwendeten Einheiten, durch die ich auch gleich an alle Werte erinnert werde. Ohne padding, border und margin sieht das CSS dann zum Beispiel so aus:

Code:
flex-basis: calc(50% - 0rem - 0px - 0rem)
Wobei das erste 0rem für das padding, das 0px für border und das zweite 0rem für margin steht.

Mein CSS für das Beispiel sieht damit so aus:

Code:
   @media all {
      article {
         padding: 0.5rem;
         border: 1px solid grey;
         border-radius: 0.4rem;
         display: flex;
         flex-wrap: wrap;
      }
      section {
         padding: 0.5rem;
         border: 1px solid grey;
         border-radius: 0.4rem;
         margin: 0.5rem;
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(100% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (min-width: 800px) {
      section {
         flex-basis: calc(50% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (min-width: 1200px) {
      section {
         flex-basis: calc(33.33% - 1rem - 2px - 1rem);
      }
   }
wobei die seitlichen Abstände in der Regel doppelt berücksichtigt werden müssen, deshalb hier die 1rem und 2px. Die Werte musst du natürlich noch deiner Webseite anpassen.

Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:

http://boratb.bplaced.net/index36.html

Gruss

MrMurphy
 
Zuletzt bearbeitet: