Flex elementi CSS
Papildus jau pētītajiem bloku modelu veidiem
ir vēl viens - flex elementi. Lai iegūtu šādus elementus,
vecākam
šiem elementiem jāieraksta īpašība display
ar vērtību flex. Pats vecāks paliks
bloka elements, bet tā pēcteči kļūs
par flex elementiem.
Flex elementiem, tāpat kā bloka elementiem, var būt
platums un augstums, margin un padding.
Tomēr, atšķirībā no bloka elementiem, pēc noklusējuma
flex elementi izvietojas rindā savā
vecākā elementā.
Pamēģināsim:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* pēcteči būs flex elementi */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
