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 өзүнүн негизги өлчөмүн сактайт жана item-1 кыскарат.