Flex elemendid CSS-is
Peale meie poolt juba uuritud plokkmudelite tüüpe
on olemas veel üks - flex elemendid. Selleks,
et saada selliseid elemente, tuleb vanemelementile
kirjutada omadus display
väärtusega flex. Vanemelement jääb endiselt
plokielemendiks, kuid tema järglased muutuvad
flex elementideks.
Flex elemendid, sarnaselt plokielementidega, võivad omada
laiust ja kõrgust, margin ja padding.
Siiski, erinevalt plokielementidest, paiknevad vaikimisi
flex elemendid reas oma vanemelemendi sees.
Proovime:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* järglased on flex elemendid */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
