Flex elementi v CSS
Poleg preučenih tipov bloknih modelov
obstaja še ena - flex elementi. Da jih dobimo,
moramo starševskemu elementu
nastaviti lastnost display
na vrednost flex. Sam starševski element bo ostal
blokni element, njegovi potomci pa bodo postali
flex elementi.
Flex elementi, podobno kot blokni, imajo lahko
širino in višino, margin in padding.
Vendar se, za razliko od bloknih, privzeto
flex elementi razporedijo v vrsto znotraj
svojega starševskega elementa.
Poskusimo:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* potomci bodo flex elementi */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
