Content

Flexbox - Referentie

Justify content

Met justify-content kun je de horizontale positie beïnvloeden van elementen binnen een flexbox.

Een
Twee
Drie
Probeer het zelf

Veel voorkomende values voor justify-content:

CSS 
                    
justify-content: flex-start;

                    
justify-content: center;

                    
justify-content: flex-end;

                    
justify-content: space-between;

                    
justify-content: space-around;

                    
justify-content: space-evenly;

Align items

Met align-items kun je de verticale positie beïnvloeden van elementen binnen een flexbox.

Een
Twee
Drie
Probeer het zelf

Veel voorkomende values voor align-items:

CSS 
                    
align-items: flex-start;

                    
align-items: center;

                    
align-items: flex-end;

                    
align-items: stretch;

Flex-direction

Met flex-direction volgorde van elementen beïnvloeden. Standaard staat de value op "row" maar door hem op "row-reverse" te zetten gaan alle elementen binnen de flexbox in de tegenovergestelde volgorde staan.

Een
Twee
Drie
Probeer het zelf

Veel voorkomende values voor flex-direction:

CSS 
                    
flex-direction: row

                    
flex-direction: row-reverse

                    
flex-direction: column

                    
flex-direction: column-reverse

Gap

Met gap kun je de ruimte beïnvloeden tussen elementen binnen een flexbox. Het werkt dus anders dan padding en margin aangezien deze properties aan beide kanten ruimte duwen, en gap alleen tussen elementen.

Een
Twee
Drie
Probeer het zelf

Veel voorkomende values voor gap:

CSS 
                    
gap: 10px; /* pixel waardes */

                    
gap: 10em; /* element modifier waardes */

                    
gap: 10%; /* percentage waardes */

                    
gap: calc(10px - 5px); /* calc functies */