Чӣ гуна кор мекунанд хосиятҳои flex-grow ва…

flex-grow ва flex-shrink муайян мекунанд, чӣ гуна унсурҳо дар дохили контейнери flex ба таври қобили тағйирёбанда мутобиқ мешаванд, мутаносибан вақте ки ҷойи озод вуҷуд дорад ё ки ҷойи кофӣ нест.

flex-grow - муайян мекунад коэффициенти, ки мувофиқи он унсур бояд афзоиш ёбад, вақте ки дар контейнер ҷойи озод вуҷуд дорад. Қимати пешфарз 0 аст (унсур паҳн намешавад). Агар чанд унсур flex-grow-и бештар аз 0 дошта бошанд, ҷойи озод байни онҳо мувофиқи қиматҳои flex-grow-и онҳо тақсим мешавад.

.item {
  flex-grow: 1; /* Унсур тамоми ҷойи озодро истифода мебарад */
}

flex-shrink - муайян мекунад коэффициенти, ки мувофиқи он унсур бояд кӯтоҳ шавад, вақте ки дар контейнер ҷойи кофӣ нест. Қимати пешфарз 1 аст (унсур ба таври proporcional кӯтоҳ мешавад). Қимати 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 андозаи асосии худро нигоҳ медорад ва item-1 кӯтоҳ мешавад.

Чӣ гуна кор мекунанд хосиятҳои flex-grow ва flex-shrink?