Flex elementer i CSS
Ud over de allerede studerede typer af blokmodeller
findes der en anden - flex elementer. For at
opnå sådanne elementer skal forælderen
til disse elementer have egenskaben display
sat til værdien flex. Forælderen forbliver
et blokelement, mens dens afkom bliver
flex elementer.
Flex elementer kan, ligesom blokelementer, have
bredde og højde, margin og padding.
Men i modsætning til blokelementer, arrangeres
flex elementer som standard på en række inde i
deres forælder.
Lad os prøve:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* afkom vil være flex elementer */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
