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

flex-grow որոշում է, թե որքան ուժեղ կարող է տարրն աճել ազատ տարածության առկայության դեպքում կոնտեյների մեջ: Արժեքը 0 (նույնպես՝ նախնական) նշանակում է, որ տարրն չի աճի: Պозитիվ արժեքները ցույց են տալիս աճի գործակիցը մյուս flex տարրերի նկատմամբ նույն շարքում:

flex-shrink որոշում է, թե որքան ուժեղ կարող է տարրն սեղմվել, երբ բացակայում է ազատ տարածք կոնտեյների մեջ: Արժեքը 1 (նույնպես՝ նախնական) նշանակում է, որ այն կարող է սեղմվել: Արժեքը 0 արգելում է սեղմումը: Պозитիվ արժեքները ցույց են տալիս սեղմման գործակիցը մյուս flex տարրերի նկատմամբ:

Օրինակ՝

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

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

.item {
  flex-basis: 100px; /* Հիմնական չափը յուրաքանչյուր տարրի */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Կբերի 1 բաժին ազատ տարածքից */
  flex-shrink: 0; /* Չի սեղմվի */
}

.item-2 {
  flex-grow: 2; /* Կբերի 2 բաժին ազատ տարածքից */
  flex-shrink: 1; /* Կարող է սեղմվել */
}

.item-3 {
  flex-grow: 1; /* Կբերի 1 բաժին ազատ տարածքից */
  flex-shrink: 1; /* Կարող է սեղմվել */
}

Այս դեպքում ընդհանուր հիմնական չափը տարրերի կազմում 300px է (3 * 100px): Ազատ տարածքը 100px է (400px - 300px): Այս ազատ տարածքը կբաշխվի flex-grow հարաբերակցությամբ՝ 1 + 2 + 1 = 4:

Տարր 1-ը կստանա 1/4 * 100px = 25px լրացուցիչ տարածք,
Տարր 2-ը կստանա 2/4 * 100px = 50px լրացուցիչ տարածք,
Տարր 3-ը կստանա 1/4 * 100px = 25px լրացուցիչ տարածք:

Նրանց վերջնական չափերը կլինեն՝

Տարր 1: 100px + 25px = 125px
Տարր 2: 100px + 50px = 150px
Տարր 3: 100px + 25px = 125px

Եթե կոնտեյների լայնությունը լինի անբավարար (օրինակ՝ 200px), ապա անհրաժեշտ կլինի սեղմել տարրերը: Սեղմման համար հաշվի են առնվում flex-shrink և տարրերի ընթացիկ չափը: Անբավարար տարածքը բաժանվում է սեղմման համար՝ ըստ flex-shrink մեծության, հարաբերակցությամբ նրանց flex-shrink և ընթացիկ չափի (հետո flex-basis հաշվի առնելով): Սեղմման ալգորիթմը ավելի բարդ է, բայց հիմնական գաղափարը այն է, որ flex-shrink մեծ արժեք ունեցող կամ մեծ ընթացիկ չափ ունեցող տարրերը սեղմվում են ավելի ուժեղ:

Կարևոր է հիշել, որ flex-basis, flex-grow և flex-shrink հաճախ օգտագործվում են միասին որպես կարճացված flex հատկություն: Օրինակ, flex: 1 1 auto; համարժեք է flex-grow: 1; flex-shrink: 1; flex-basis: auto;:

Առաջնահերթություն տարածքի բաշխման ժամանակ՝

flex-basis: սահմանում է սկզբնական չափը;
flex-grow: բաշխում է դրական ազատ տարածքը;
flex-shrink: բաշխում է բացասական ազատ տարածքը (պահանջն է սեղմել):

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