Flexbox-Unterelemente

Eigenschaften der Unterelemente

Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet.

flex-grow

                #example10 { 
   display: flex; 
   flex-flow: row nowrap; 
 } 
 

                    #example10 > p { 
   flex-grow: 1; 
 }
            

Mit flex-grow wird bestimmt, ob die Elemente in der Box auf den zur verfügung stehenden Platz anwachsen sollen. 1 = ja, 0 = nein.

flex-basis

                #example11 { 
   display: flex; 
   flex-flow: row nowrap; 
 } 
 

                    #example11 > p { 
   flex-basis: 100px; 
 }
            

Diese Eigenschaft stellt die feste Größe der Elemente ein, sollten flex-grow und flex-shrink nicht gesetzt sein.

flex-shrink

                #example12 { 
   display: flex; 
   flex-flow: row nowrap; 
 } 
 

                    #example12 > p { 
   flex-basis: 40px; 
   flex-shrink: 0; 
 }
            

                #example13 { 
   display: flex; 
   flex-flow: row nowrap; 
 } 
 

                    #example13 > p { 
   flex-basis: 40px; 
   flex-shrink: 1; 
 }
            

flex-shrink stellt ein, ob die Elemente nach möglichkeit schrumpfen sollen, um den Rahmen der Flexbox nicht zu überschreiten. 1 = ja, 0 = nein.