Flexbox-Eigenschaften

Eigenschaften

Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können.

flex-wrap

Mit horizontaler Anordnung

                    #example3 { 
   display: flex; 
   flex-direction: row; 
   flex-wrap: wrap; 
 }
                

Mit vertikaler Anordnung

                    #example4 { 
   display: flex; 
   flex-direction: column; 
   flex-wrap: wrap; 
   max-height: 600px; 
 }
                

Die Eigenschaft flex-wrap bestimmt, ob Elemente die über den Platz in der Hauptrichtung hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen. Der Standard-Wert ist nowrap, wrap aktiviert das Wrapping.

flex-flow

                    #example4 { 
   display: flex; 
   flex-flow: column wrap; 
   max-height: 600px; 
 }
                

flex-flow ist ein Shortcut, welcher die Eigenschaften flex-direction und flex-wrap in einer Zeile zusammenfasst.

justify-content

                    #example5 { 
   display: flex; 
   flex-flow: row wrap; 
   justify-content: center; 
 }
                

                    #example6 { 
   display: flex; 
   flex-flow: row wrap; 
   justify-content: flex-end; 
 }
                

Über justify-content lässt sich die Ausrichtung der Elemente entlang der Hauptachse der Flexbox einstellen.

Diese Werte können gesetzt werden:
- flex-start - flex-end - center - space-around - space-between - space-evenly

align-content

                    #example7 { 
   display: flex; 
   flex-flow: row wrap; 
   justify-content: flex-end; 
   align-content: space-between; 
 }
                

align-content funktioniert wie justify-content, bestimmt allerdings die nicht-Hauptachse (z.B. wenn Wrapping stattfindet).

Diese Werte können gesetzt werden:
- stretch - center - flex-start - flex-end - space-around - space-between - space-evenly

overflow

                    #example8 { 
   display: flex; 
   flex-flow: row nowrap; 
   overflow-x: scroll; 
 }
                

p10

p11

p12

                    #example9 { 
   display: flex; 
   flex-flow: column nowrap; 
   max-height: 600px; 
   overflow-y: scroll; 
 }
                

p10

p11

p12

Die overflow-Eigenschaft beschreibt, was passiert wenn Elemente den Rahmen der Flexbox überschreiten. visible ist die Standard-option, scroll erzeugt eine Scroll-leiste und hidden versteckt Elemente die nicht mehr in die Box passen.