CSS Flexbox of de Flexible Box Layout Module, is een CSS layout model dat het eenvoudig maakt om responsieve en dynamische layouts te creëren. Een ander voorbeeld hiervan is een CSS Grid Layout.

CSS Flexbox layout

In tegenstelling tot het twee-dimensionale CSS Grid is Flexbox vooral ontworpen voor het uitlijnen van items in een rij of kolom (één dimensie).

Het biedt een efficiënte manier om de ruimte te verdelen en elementen uit te lijnen binnen een container, zelfs als de grootte onbekend of dynamisch is.

Als je snel een Flexbox layout wilt maken kun je gebruik maken van de gratis Flexbox Generator van CSSPortal.com.

Voorbeeld CSS Flexbox layout

Hieronder vind je een voorbeeld en de uitleg van een CSS Flexbox.


.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.flex-item {
background-color: #8cacea;
padding: 20px;
margin: 10px;
text-align: center;
border: 1px solid #000;
}

1
2
3
Flex container: De .flex-container class gebruikt display: flex; om de flexbox layout te activeren.
Justify content: justify-content: center; centreert de flex items horizontaal in de container.
Align items: align-items: center; centreert de flex items verticaal in de container.
Flex items: Elke .flex-item is een item binnen de flex container en wordt gestyled met padding, margin, en een border voor visuele duidelijkheid.
Flexbox maakt het eenvoudig om items uit te lijnen en te verdelen binnen een container, vooral als je niet weet hoe groot de items van tevoren zullen zijn. Het is een krachtig hulpmiddel voor het maken van dynamische, flexibele layouts.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.