CSS да флекс элементларининг ғазабкорлиги

Ҳозирда бизда қаторда жойлашган икки флекс-блок бор дейлик. Ушбу блокларга 100px эни берилган, уларнинг ота-онасига эса - 300px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Кўриб турганингиздек, бизнинг элементларимизнинг умумий эни ота-онанинг энидан кичик, шу сабаб ўнг томонда бўш жой қолмокда.

Исталганда, ушбу бўш жойни пропорционал равишда бизнинг элементларимиз ўртасида таксимлаш мумкин. Бу flex-grow хоссаси ёрдамида амалга оширилади, у флекс-элементларга берилади. Ушбу хоссанинг қиймати ўлчовсиз сондир.

Келинг, амалиётда ушбу хосса қандай ишлашини кўриб чиқайлик.

Мисол

Ҳозирда бизда эни 100px бўлган икки флекс-блок бор. Элементларимизнинг умумий эни 200px, ота-онанинг эни эса - 300px. Демак, 100px бўш жой қолмокда.

Агар элементларга flex-grow берилмаган бўлса, биз фақат ушбу бўш жойни кўрамиз. Агар у берилган бўлса, у ҳолда элементларимизнинг ҳақиқий эни берилган энидан катта бўлади - улар бўш жойни ўзаро пропорционал таксимлаб олиб, ўз энига қўшиб қўяди.

Мисол учун, биринчи элементнинг flex-grow 1 га, иккинчисиники эса 3 га тенг бўлсин. Келинг, ҳисоблаб кўрамиз, ҳар бир элемент қанча бўш жой олишини.

Аввало бизнинг барча элементларимизнинг flex-grow бирликларининг умумий йиғиндисини топишимиз керак. Биринчи элементники 1 га, иккинчи элементники эса 3 га тенг. Демак, умумий йиғинди 4 га тенг.

Энди 100px бўш жойни 4 га бўламиз ва flex-grow бирлигига 25px тўғри келишини кўрамиз. Демак, биринчи элементга бир flex-grow бирлиги, яъни 25px қўшилади, иккинчи элементга эса уч та бирлик, яъни 75px қўшилади.

Биринчи элементнинг эни 125px бўлади, иккинчисиники эса 175px бўлади:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 3;
}

Результат:

Мисол

Энди ота-онанинг эни 400px га, биринчи элементнинг эни 200px га, иккинчи элементнинг эни эса 100px га тенг бўлсин. Демак, бўш жой яна 100px га тенг.

Келинг, ҳар бир элементга flex-grow ни 1 га тенг қиймат берайлик. Умумий йиғинди 2 бўлади, яъни 100px бўш жойни 2 га бўлиш керак. Демак, ғазабкорлик бирлигига 50px тўғри келади.

Ҳамма элементларнинг flex-grow қиймати бир хил бўлгани учун, ҳамма элементларга 50px миқдорида бир хил қиймат қўшилади. Демак, биринчи элемент 250px га, иккинчи элемент эса 150px га айланади:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Мисол

Яна ота-онанинг эни 400px га, биринчи элементнинг эни 200px га, иккинчи элементнинг эни эса 100px га тенг бўлсин.

Энди биринчи элементга flex-grow ни 3 қийматида, иккинчисига эса 1 қийматида белгилайлик. Демак, ғазабкорлик умумий йиғиндиси 4 га тенг. У ҳолда бир ғазабкорлик бирлиги 100px / 4 = 25px га тенг.

Биринчи элементга 75px қўшилади, ва у 275px га айланади, иккинчи элементга эса 25px қўшилади, ва у 125px га айланади:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
</div>

css.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}

Результат:

Амалий машқлар

Қуйидаги барча машқларда сизга эни ва flex-grow берилган флекс-элементлар билан код кўрсатилади. Кўрсатилган код асосида ҳисобланг, ҳар бир элемент қандай ўлчамларга эга бўлишини. Сўнгра кодни ишга тушириб, элементларнинг ҳақиқий энини ўлчаб, ҳисоблангизни текширинг.

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 200px;
  flex-grow: 3;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

css.parent {
  display: flex;
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 100px;
  flex-grow: 4;
}
.elem4 {
  width: 100px;
  flex-grow: 3;
}