Ankündigung

Einklappen
Keine Ankündigung bisher.

Flex wrap nach je 2 Items

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Flex wrap nach je 2 Items

    Hi

    habe mal jsfiddle missbraucht, um mein CSS Problem darzustellen. Ich will, dass die Items sich horizontal gleichmäßig über den verfügbaren Space ausbreiten und dass nach jedem zweiten Item eine neue Zeile beginnt. In dem Fiddle sieht das zwar so aus, allerdings ist das mit den 48% gemogelt.
    Leider finde ich nicht die Anweisung, die den Browser die Länge der Items bestimmen lässt nach eingangs genannter Maßgabe.

    Kann mir da bitte jemand einen Tipp geben?
    [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

  • #2
    Prinzipiell geht das schon in die richtige Richtung, ich habe dir mal ein Fiddle erstellt, so wie ich es machen würde: https://jsfiddle.net/9g46szjm/

    Man kann die Größe von Flexbox-Elementen statt mit der Flex-Eigenschaft, die die 3 Angaben Grow, Shrink und Length vereint, auch mit Height und Width steuern. Bei beiden kann man auch mit CSS-Calc arbeiten. In meinem Beispiel ziehe ich den addierten Wert des Paddings des Flex-Containers und des Margins der Flex-Items von deren gewünschter Breite von 50% ab. Der Padding und Margin sorgen zusammen dafür, dass der Abstand der Flex-Items in alle Richtungen immer gleich ist. Mit Justify-Content: Center kann man dafür sorgen, dass das letzte Flex-Item bei einer ungeraden Anzahl mittig dargestellt wird.

    Man könnte außerdem überlegen, zu einer bestimmten Bildschirmgröße einen responsiven Umbruch durch einen Media-Query einzubauen, der dafür sorgt, dass nur noch 1 Flex-Item pro Zeile dargestellt wird - so würden sie nicht zu schmal wenn das Ausgabegerät zu schmal wird.

    Die ganzen Angaben in px sollte man natürlich später in rem bestimmen, damit spart man sich für die responsiven Umbrüche viele Media-Queries .

    Kommentar


    • #3
      Vielen herzlichen Dank an wario. Diese sehr ausführliche Antwort hilft mir prima weiter.
      [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

      Kommentar

      Lädt...
      X