Flex als column und wrap

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tobi44

Mitglied
5 März 2009
372
0
16
Hallo,

ich beschäftige mich mal wieder mit display flex.

Hierzu habe ich eine Frage:

Mein DIV-Container, bestückt mit display:flex und einer 100%-Breite sowie 600px Höhe. Er soll seinen Inhalt als Spalten anzeigen, daher flex-direction:column, und er soll seinen Inhalt mehrzeilig anzeigen, bevor er zu eng gequetscht wird, daher flex-wrap:wrap.

Das klappt auch, und sieht auch - je nach Bildschirmgröße - ganz gut aus.

Allerdings ärgere ich mich ein bisschen darüber, dass meine 10 "Boxen" stets in 2 Reihen - also in jeder Reihe 5 Inhalte - aufgeteilt werden.
Mag sein, dass das Sinn dieser flex-Methode ist, aber bei so vielen Anpassungsmöglichkeiten müsste es doch auch hier was geben ...

Kann man bei dieser Einteilung nicht weitere Einstellungen treffen? Was ist, wenn der Benutzer sich das auf einem Smartphone mit kleinem Viewport ansieht? Hier würde ich bevorzugen, dass nicht je 5 Inhalte in einer Reihe angezeigt werden, sondern z. B. nur 3.

Oder gibt es hierfür eine besser geeignete Methode in CSS?

Nachtrag: Gut, ich könnte natürlich einfach per @media bei einer max-width von 800px oder so das column durch ein row ersetzen. Das werde ich nun mal testen.

Danke.
 

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
Hallo,
Nachtrag: Gut, ich könnte natürlich einfach per @media bei einer max-width von 800px oder so das column durch ein row ersetzen. Das werde ich nun mal testen.
Danke.

Oder mit prozentualer Höhe und/oder Breite der 10 Boxen arbeiten - Damit solltest du die auch einteilen können.
Zur Not mal mit Codebeispiel.
 

Tobi44

Mitglied
5 März 2009
372
0
16
Danke für die Infos.
Ich habe nun für die mobile Ansicht bzw. bis unter 1000px Bildschirmbreite flex-wrap:nowrap drin, sodass keine Nebeneinander-Aufreihung stattfindet, sondern die Inhalte untereinander gelistet werden. Auf einem großen Bildschirm werden jeweils 5 Inhalte in Reihe dargestellt.
Sieht sehr gut aus.

Gruß
 
Werbung: