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

flex-grow анықтайды, элемент қаншалықты күшті өсетінін бос кеңістік болған кезде контейнерде. Мәні 0 (әдепкі) болса, элемент өсетін болмайды. Позитивті мәндер басқа flex элементтеріне қатысты өсу коэффициентін көрсетеді сол қатарда.

flex-shrink анықтайды, элемент қаншалықты күшті кішірейтілуі мүмкін бос кеңістік жетіспеген кезде. Мәні 1 (әдепкі) болса, кішірейтілуі мүмкін. Мәні 0 кішірейтілуді тыйады. Позитивті мәндер басқа flex элементтеріне қатысты кішірейту коэффициентін көрсетеді.

Мысал:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Контейнердің ені */
}

.item {
  flex-basis: 100px; /* Әр элементтің негізгі өлшемі */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Бос кеңістіктің 1 бөлігін алады */
  flex-shrink: 0; /* Кішіреймейді */
}

.item-2 {
  flex-grow: 2; /* Бос кеңістіктің 2 бөлігін алады */
  flex-shrink: 1; /* Кішірейтілуі мүмкін */
}

.item-3 {
  flex-grow: 1; /* Бос кеңістіктің 1 бөлігін алады */
  flex-shrink: 1; /* Кішірейтілуі мүмкін */
}

Бұл жағдайда жалпы негізгі өлшемдер 300px құрайды (3 * 100px). Бос кеңістік 100px (400px - 300px). Бұл бос кеңістік flex-grow қатынасында бөлінеді: 1 + 2 + 1 = 4. Элемент 1 1/4 * 100px = 25px қосымша кеңістік алады. Элемент 2 2/4 * 100px = 50px қосымша кеңістік алады. Элемент 3 1/4 * 100px = 25px қосымша кеңістік алады.

Олардың соңғы өлшемдері: Элемент 1: 100px + 25px = 125px Элемент 2: 100px + 50px = 150px Элемент 3: 100px + 25px = 125px

Егер контейнердің ені жеткіліксіз болса (мысалы, 200px), онда кішірейту қажет болады. Қысқарту үшін flex-shrink және элементтердің ағымдағы өлшемдері ескеріледі. Жетпейтін кеңістік flex-shrink мәні үлкенірек немесе ағымдағы өлшемі үлкенірек элементтер арасында пропорционалды түрде бөлінеді. Қысу алгоритмі күрделірек, бірақ негізгі идеясы — flex-shrink үлкенірек немесе ағымдағы өлшемі үлкенірек элементтер көбірек қысылатындығында.

Маңызды: flex-basis, flex-grow және flex-shrink жиі бірге flex қысқартылған қасиеті ретінде пайдаланылады. Мысалы, flex: 1 1 auto; тең flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Кеңістік бөлу кезінде басымдық:

flex-basis: элементтің бастапқы өлшемін орнатады.
flex-grow: оң бос кеңістікті бөледі.
flex-shrink: теріс бос кеңістікті бөледі (қысу қажеттілігі).

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