Flex elementen in CSS
Naast de door ons bestudeerde typen blokmodellen
is er nog een - flex elementen. Om
dergelijke elementen te krijgen, moet de ouder
van deze elementen de eigenschap display
met de waarde flex krijgen. De ouder zelf blijft
een blokelement, maar zijn nakomelingen worden
flex elementen.
Flex elementen kunnen, net als blokelementen,
een breedte en hoogte hebben, margin en padding.
Echter, in tegenstelling tot blokelementen,
worden flex elementen standaard in een rij opgesteld binnen
hun ouder.
Laten we het proberen:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* nakomelingen worden flex elementen */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
