Жадность флекс элементов в 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;
}