Ինչպես կարելի է ճկուն կերպով փոխել flexbox-ով օգտագործվող տարրերի չափերը?

Դուք կարող եք ճկուն կերպով փոխել flexbox-ի տարրերի չափերը flex-grow, flex-shrink և flex-basis հատկությունների միջոցով:

• flex-grow: Կարգավորում է, թե որքանով կարող է տարրն ընդլայնվել, զբաղեցնելով ազատ տարածությունը կոնտեյների մեջ: Դեպի ստանդարտ արժեքը 0 է (չի ընդլայնվում): Ավելի բարձր արժեքը ցույց է տալիս ավելի մեծ ընդլայնման գործակից մյուս տարրերի նկատմամբ:
• flex-shrink: Կարգավորում է, թե որքանով կարող է տարրն սեղմվել, երբ չկա ազատ տարածություն: Դեպի ստանդարտ արժեքը 1 է (սեղմվում է): Ավելի բարձր արժեքը ցույց է տալիս ավելի մեծ սեղմման գործակից:
• flex-basis: Կարգավորում է տարրի հիմնական չափը՝ նախքան ազատ տարածության բաժանումը: Կարող է լինել ֆիքսված արժեք (px, %, rem) կամ բանալի բառ (auto, content):

Այս երեք հատկությունները հաճախ համակցվում են flex կարճ ձևով՝ flex: <flex-grow> <flex-shrink> <flex-basis>;:

Օգտագործման օրինակներ:

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

/* Տարրը չի սեղմվի, երբ չկա տեղ */
.flex-item {
  flex-shrink: 0;
}

/* Տարրը ունի 100px հիմնական չափ, և ընդլայնվում է, եթե կա տեղ */
.flex-item {
  flex: 1 1 100px;
}

/* Տարրը ունի հիմնական չափ, որը սահմանվում է նրա պարունակությամբ, և կարող է սեղմվել */
.flex-item {
  flex: 0 1 auto; /* Համարժեք է `flex: initial;`-ին */
}

/* Տարրը չի ընդլայնվում, չի սեղմվում և ունի հիմնական չափ, որը սահմանվում է նրա պարունակությամբ */
.flex-item {
  flex: 0 0 auto; /* Համարժեք է `flex: none;`-ին */
}

/* Տարրը ընդլայնվում է, սեղմվում և ունի հիմնական չափ 0 (օգտակար է նույն լայնության տարրեր ստեղծելու համար) */
.flex-item {
  flex: 1 1 0; /* Համարժեք է `flex: auto;`-ին */
}

Այս հատկությունների օգտագործումը թույլ է տալիս ճշգրիտ կառավարել տարրերի վարքագիծը flex կոնտեյների ներսում՝ էկրանին կամ պարունակությանը համապատասխան։