Flex elementy v CSS

Okrem už nami preštudovaných typov blokových modelov existuje ešte jeden - flex elementy. Aby sme ich získali, musíme rodičovi týchto elementov nastaviť vlastnosť display s hodnotou flex. Samotný rodič zostane blokový element, no jeho potomkovia sa stanú flex elementmi.

Flex elementy, podobne ako blokové, môžu mať šírku a výšku, margin a padding. Avšak, na rozdiel od blokových, sa štandardne flex elementy zoraďujú do riadku vnútri svojho rodiča.

Skúsme to:

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

css.parent {
  display: flex; /* potomkovia budú flex elementmi */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат:

Задание 1