Flex elementy v CSS
Okrem už nami preštudovaných typov blokových modelov
existuje ešte jeden - flex elementy. Aby sme ich získali, musíme rodičovi
týchto elementov nastaviť vlastnosť display
s hodnotou flex. Samotný rodič zostane
blokový element, no jeho potomkovia sa stanú
flex elementmi.
Flex elementy, podobne ako blokové, môžu mať
šírku a výšku, margin a padding.
Avšak, na rozdiel od blokových, sa štandardne
flex elementy zoraďujú do riadku vnútri
svojho rodiča.
Skúsme to:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* potomkovia budú flex elementmi */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
