Гирӣи элементҳои флекс дар 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 тақсим кунем ва пайдо кунем, ки ба 25px баробар
ба як воҳиди flex-grow рост меояд. Маълум мешавад,
ки ба элементи аввал як воҳиди
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;
}
