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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.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;
}

Результат:

Задание 1