Flex-elementer i CSS
I tillegg til blokkmodelltypene vi har studert
finnes det en annen - flex-elementer. For å
få slike elementer, må du forelderen
til disse elementene ha egenskapen display
satt til verdien flex. Selve forelderen forblir
et blokkelement, mens dens etterkommere blir
flex-elementer.
Flex-elementer, i likhet med blokkelementer, kan ha
bredde og høyde, margin og padding.
Men i motsetning til blokkelementer, er det slik at
flex-elementer som standard stilles opp på rad inni
sin forelder.
La oss prøve:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* etterkommere vil bli flex-elementer */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
: