Flex elemendid CSS-is

Peale meie poolt juba uuritud plokkmudelite tüüpe on olemas veel üks - flex elemendid. Selleks, et saada selliseid elemente, tuleb vanemelementile kirjutada omadus display väärtusega flex. Vanemelement jääb endiselt plokielemendiks, kuid tema järglased muutuvad flex elementideks.

Flex elemendid, sarnaselt plokielementidega, võivad omada laiust ja kõrgust, margin ja padding. Siiski, erinevalt plokielementidest, paiknevad vaikimisi flex elemendid reas oma vanemelemendi sees.

Proovime:

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

css.parent {
  display: flex; /* järglased on flex elemendid */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат: