Чӣ тавр вазифаҳои flex-grow ва flex-shrink кор…

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

flex-grow:

муайян мекунад, ки кадом қисми ҷойи озоди дастрас дар контейнери flex барои элемент хоҳад буд, агар ҷойи озод вуҷуд дошта бошад.
Ба таври пешфарз flex-grow: 0, ки маънои онро дорад, ки элемент наметавонад калон шавад.
Қимат - рақами неотрицателӣ.
Агар чанд элемент flex-grow-и бештар аз 0 дошта бошанд, ҷойи озод байни онҳо нисбат ба арзишҳои flex-grow-и онҳо тақсим мешавад.

flex-shrink:

муайян мекунад, ки чӣ қадар элемент кӯтоҳ мешавад, агар ҷойи дастрас дар контейнери flex аз ҷамъиятҳои асосии ҳамаи элементҳо камтар бошад.
Ба таври пешфарз flex-shrink: 1, ки маънои онро дорад, ки элемент метавонад кӯтоҳ шавад.
Қимат - рақами неотрицателӣ.
Ҳатто ки қимати flex-shrink калонтар бошад, он қадар бештар элемент кӯтоҳ мешавад нисбат ба дигарон бо қиматҳои хурд.
Дар вақти кӯтоҳшавӣ, дар назар гирифта мешавад паҳнои асосии элемент (flex-basis ё width).

Масалан:

.контейнер {
  display: flex;
  width: 500px;
  /* Ҳамагӣ паҳнои контейнер */
}

.элемент {
  flex-basis: 100px;
  /* Паҳнои асосии ҳар як элемент */
}

.элемент:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Қиматҳои пешфарз */
}

.элемент:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Намегузарад */
}

.элемент:nth-child(3) {
  flex-grow: 0; /* Намегузарад */
  flex-shrink: 2; /* Бештар кӯтоҳ мешавад */
}

Агар ҷамъиятҳои паҳнои асосӣ (300px) камтар аз паҳнои контейнер (500px) бошад, ҷойи боқӣ монда (200px) байни аввал ва дуввумин элемент дар нисбати flex-grow 1:2 тақсим мешавад.

Агар ҷамъиятҳои паҳнои асосӣ аз паҳнои контейнер бештар бошанд, элементҳо мувофиқи арзишҳои flex-shrink ва андозаи асосии онҳо кӯтоҳ мешаванд. Элемент бо flex-shrink: 0 кӯтоҳ намешавад.

Чӣ тавр вазифаҳои flex-grow ва flex-shrink кор мекунанд?