Ինչպես են աշխատում flex-grow և flex-shrink…

flex-grow և flex-shrink կառավարում են, թե ինչպես են flex տարրերը բաժանում ազատ տարածքը ներսում flex կոնտեյների։

flex-grow:

Կարգավորում է, թե որ մասն է հասանելի ազատ տարածքից, որը զբաղեցնելու է տարր, եթե կա ազատ տարածք։
Դեպքում flex-grow: 0՝ նշանակում է, որ տարրը չի մեծանում։
Արժեքը - ոչ բացասական թիվ։
Եթե մի քանի տարր ունեն flex-grow մեծ արժեք, ազատ տարածքը բաժանվում է նրանց միջև համապատասխան նրանց flex-grow արժեքների։

flex-shrink:

Կարգավորում է, թե որքանով է տարրը կրճատվում, եթե հասանելի տարածքը փոքր է, քան բոլոր flex տարրերի հիմնական չափերը։
Դեպքում flex-shrink: 1՝ նշանակում է, որ տարրը կարող է կրճատվել։
Արժեքը - ոչ բացասական թիվ։
Որքան մեծ է flex-shrink-ը, այնքան ուժեղ կրճատվում է տարրը մյուսների համեմատ։
Կրճատման ժամանակ հաշվի է առնվում տարրի հիմնական լայնությունը (flex-basis կամ width)։

Օրինակ՝

.կոնտեյներ {
  display: flex;
  width: 500px;
  /* Կոնտեյների ընդհանուր լայնությունը */
}

.մաս {
  flex-basis: 100px;
  /* Ամեն մի մասի հիմնական լայնությունը */
}

.մաս:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Դեպքի ըստ նախնական արժեքների */
}

.մաս:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Չի կրճատվում */
}

.մաս:nth-child(3) {
  flex-grow: 0; /* Չի մեծանում */
  flex-shrink: 2; /* Ավելի ուժեղ կրճատվում է */
}

Եթե հիմնական լայնությունների գումարը (300px) փոքր է կոնտեյների լայնությունից (500px), մնացած տարածքը (200px) բաժանվում է առաջին և երկրորդ տարրերի միջև flex-grow 1:2 հարաբերությամբ։

Եթե հիմնական լայնությունների գումարը մեծ է կոնտեյների լայնությունից, տարրերը կրճատվում են ըստ իրենց flex-shrink արժեքների և հիմնական չափերի։ Տարր, որի flex-shrink: 0, չի կրճատվի։

Ինչպես են աշխատում flex-grow և flex-shrink հատկությունները?