Чӣ гуна метавон андозаҳои унсурҳоро, ки 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;` */
}

Истифодаи ин хусусиятҳо имкон медиҳад, ки рафтору хосиятҳои элементҳоро дар дохили контейнери flex бо дақиқӣ назорат кардан мумкин аст, вақте ки андозаи экран ё мундариҷа тағйир меёбад.

Чӣ гуна метавон андозаҳои унсурҳоро, ки flexbox-ро истифода мебаранд, ба таври чандир тағйир дод?