CSS-də Fleks Elementlər

Öyrəndiyimiz blok modellərinin tiplərindən əlavə onlardan başqa biri də var - fleks elementlər. Bunun üçün, bu elementlərin valideyninə display xassəsini flex dəyərində təyin etmək lazımdır. Valideyn özü blok elementi olaraq qalacaq, onun varisləri isə fleks elementlərinə çevriləcək.

Fleks elementlər, blok elementlər kimi eni və hündürlüyü, margin və padding ola bilər. Lakin, blok elementlərindən fərqli olaraq, standart olaraq fleks elementlər öz valideyninin daxilində sıra ilə düzülür.

Gəlin cəhd edək:

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

css.parent {
  display: flex; /* varislər fleks elementləri olacaq */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат:

Задание 1