Flex elemek a CSS-ben

A már tanulmányozott blokkmodell-típusok mellett van még egy - a flex elemek. Ahhoz, hogy ilyen elemeket kapjunk, a szülő elemnek be kell állítani a display tulajdonságot flex értékre. Maga a szülő elem blokk elemmé marad, de a leszármazottai flex elemekké válnak.

A flex elemek, hasonlóan a blokk elemekhez, rendelkezhetnek szélességgel és magassággal, margin és padding értékekkel. Azonban a blokk elemektől eltérően, alapértelmezetten a flex elemek egy sorba rendeződnek a szülő elemükön belül.

Próbáljuk ki:

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

css.parent {
  display: flex; /* a leszármazottak flex elemek lesznek */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат:

Задание 1