Elementy flex w CSS
Oprócz poznanych przez nas typów modeli blokowych
jest jeszcze jeden - elementy flex. Aby
uzyskać takie elementy, należy rodzicowi
tych elementów ustawić właściwość display
na wartość flex. Sam rodzic pozostanie
elementem blokowym, ale jego potomkowie staną się
elementami flex.
Elementy flex, podobnie jak blokowe, mogą mieć
szerokość i wysokość, margin i padding.
Jednak, w przeciwieństwie do blokowych, domyślnie
elementy flex ustawiają się w rzędzie wewnątrz
swojego rodzica.
Spróbujmy:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* potomkowie będą elementami flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
