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.