CSS да флекс элементларининг ғазабкорлиги
Ҳозирда бизда қаторда жойлашган икки флекс-блок бор дейлик.
Ушбу блокларга 100px эни берилган,
уларнинг ота-онасига эса - 300px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.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 бўлади:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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 га айланади:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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 га айланади:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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
берилган флекс-элементлар билан код кўрсатилади.
Кўрсатилган код асосида ҳисобланг, ҳар бир элемент қандай
ўлчамларга эга бўлишини. Сўнгра кодни ишга тушириб,
элементларнинг ҳақиқий энини ўлчаб, ҳисоблангизни текширинг.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.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;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.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;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.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;
}
<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>
.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;
}
