Flex xassəsi

flex xassəsi flex-basis, flex-shrink və flex-grow üçün qısaldılmış yazılışdır.

Tətbiq edildiyi: konkret flex blokuna.

Dəyərlərin sırasının əhəmiyyəti yoxdur. Ikinci və üçüncü parametrlər (flex-shrink, flex-basis) məcburi deyil.

Dəyərlər

Uyğun xassələrə baxın.

Standart dəyər: 0 1 auto.

Nümunə

Tutaq ki, bizim 3 elementimiz var. Hər birinin eni 200px təşkil edir və ümumi olaraq 600px-yə bərabərdir, bu da valideyn konteynerinin enindən çoxdur, hansı ki, 300px-yə bərabərdir. Gəlin birinci element üçün eni 200px, ikinci element üçün - 300px, üçüncü element üçün isə - 100px təyin edək. Bütün elementlərin flex-basis dəyəri 1, flex-shrink dəyəri isə elementin sıra nömrəsinə uyğun olaraq 1, 2, 3 olsun:

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

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

Həmçinin bax