Elemente Flex în CSS
Pe lângă tipurile de modele de layout pe care le-am studiat
există încă unul - elementele flex. Pentru a
obține astfel de elemente, este necesar ca părintele
acestor elemente să aibă proprietatea display
setată la valoarea flex. Părintele în sine va rămâne
un element bloc, dar descendenții săi vor deveni
elemente flex.
Elementele flex, similar cu elementele bloc, pot avea
lățime și înălțime, margin și padding.
Cu toate acestea, spre deosebire de elementele bloc, implicit
elementele flex se aliniază pe un rând în interiorul
părintelui lor.
Să încercăm:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* descendenții vor fi elemente flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
