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;
}