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

flex-grow և flex-shrink որոշում են, թե ինչպես են տարրերը ճկուն կերպով հարմարեցնում իրենց չափը flex կոնտեյների ներսում, համապատասխանաբար, երբ կա ազատ տարածք կամ երբ տարածքը քիչ է:

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

.item {
  flex-grow: 1; /* Տարրը կօգտագործի բոլոր հասանելի ազատ տարածքը */
}

flex-shrink - որոշում է գործակիցը, ըստ որի տարրը պետք է փոքրանա, երբ կոնտեյնում քիչ տեղ կա: Դեպի ստանդարտ արժեքը 1 է (տարրը փոքրանում է մյուս փոքրացող տարրերի հետ հարաբերականորեն): 0 արժեքը կանխում է տարրի փոքրացումը:

.item {
  flex-shrink: 0; /* Տարրը չի փոքրանա */
}

Համատեղ flex-basis-ի հետ նրանք կազմում են կարճացված flex հատկությունը՝ flex: <flex-grow> <flex-shrink> <flex-basis>:

Օրինակ՝

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

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

.item {
  flex-basis: 100px; /* Բոլոր տարրերի հիմնական չափը */
}

.item-1 {
  flex-grow: 1; /* Item 1-ը կօգտագործի ազատ տարածքը */
}

.item-2 {
  flex-shrink: 0; /* Item 2-ը չի փոքրանա */
}

Եթե կոնտեյները լայն է 200px-ից (100px + 100px), ապա item-1 կօգտագործի մնացած ազատ տարածքը: Եթե արդեն 200px է, ապա item-2 կմնա իր հիմնական չափով 100px, իսկ item-1 կկրճատվի։

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