Жаднасць флекс элементаў у 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 і атрымаем, што 25px прыпадае
на адну адзінку flex-grow. Атрымаецца,
што да першага элемента дадасца адна адзінка
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;
}