Flexbox prvky v CSS
Kromě již probraných typů blokových modelů
existuje ještě jeden - flexbox prvky. Abychom
je získali, je potřeba rodiči
těchto prvků nastavit vlastnost display
na hodnotu flex. Samotný rodič zůstane
blokovým elementem, ale jeho potomci se stanou
flexbox prvky.
Flexbox prvky, podobně jako blokové, mohou mít
šířku a výšku, margin a padding.
Na rozdíl od blokových se však standardně
flexbox prvky řadí do řady uvnitř
svého rodiče.
Pojďme to zkusit:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* potomci budou flexbox prvky */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
