Flexbox istifadə edən elementlərin ölçülərini necə…

Flexbox daxilində elementlərin ölçülərini flex-grow, flex-shrink və flex-basis xüsusiyyətləri ilə elastik şəkildə dəyişdirmək mümkündür.

flex-grow: Elementin konteynerdə sərbəst sahəni nə dərəcədə genişləndirə biləcəyini müəyyən edir. Standart dəyər 0 (genişlənmir). Daha yüksək dəyər digər elementlərlə müqayisədə daha böyük genişlənmə koeffisientini göstərir.
flex-shrink: Sərbəst sahənin çatışmazlığı halında elementin nə dərəcədə kiçilə biləcəyini müəyyən edir. Standart dəyər 1 (kiçilir). Daha yüksək dəyər daha böyük kiçilmə koeffisientini göstərir.
flex-basis: Sərbəst sahənin bölüşdürülməsindən əvvəl elementin əsas ölçüsünü müəyyən edir. Sabit dəyər (px, %, rem) və ya açar sözlər (auto, content) ola bilər.

Bu üç xüsusiyyət tez-tez flex qısaltma xüsusiyyətində birləşdirilir: flex: <flex-grow> <flex-shrink> <flex-basis>;.

İstifadə nümunələri:

/* Element mövcud olan bütün sahəni tutacaq */
.flex-item {
  flex-grow: 1;
}

/* Sərbəst sahə çatışmazlığı halında element kiçilməyəcək */
.flex-item {
  flex-shrink: 0;
}

/* Elementin əsas ölçüsü 100px-dir və yer varsa genişləyir */
.flex-item {
  flex: 1 1 100px;
}

/* Elementin əsas ölçüsü onun məzmunu ilə müəyyən edilir və kiçilə bilər */
.flex-item {
  flex: 0 1 auto; /* `flex: initial;` ilə eynidir */
}

/* Element genişlənmir, kiçilməyir və əsas ölçüsü onun məzmunu ilə müəyyən edilir */
.flex-item {
  flex: 0 0 auto; /* `flex: none;` ilə eynidir */
}

/* Element genişlənir, kiçilir və əsas ölçüsü 0-dır (eyni enli elementlər yaratmaq üçün əlverişlidir) */
.flex-item {
  flex: 1 1 0; /* `flex: auto;` ilə eynidir */
}

Bu xüsusiyyətlərin istifadəsi elementlərin davranışını dəqiq idarə etməyə imkan verir, ekran və ya məzmun ölçüsü dəyişdikdə.

Flexbox istifadə edən elementlərin ölçülərini necə çevik şəkildə dəyişə bilərsiniz?