flex-grow жана flex-shrink мүнөздөмөлөрү кандай…

flex-grow жана flex-shrink 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 мүнөздөмөлөрү кандай иштейт?