Свойство flex-grow - "жадность" отдельно взятого flex-блока в CSS
Свойство flex-grow определяет то,
на сколько отдельный flex-блок может быть
больше соседних элементов, если
это необходимо.
Например, если все flex-блоки внутри flex-контейнера
имеют flex-grow:1, то они будут одинакового
размера. Если один из них имеет flex-grow:2,
то он будет в 2 раза больше, чем все
остальные.
Если суммарная ширина элементов
меньше ширины родителя, поэтому справа остается
пустое пространство. При желании это пустое пространство можно
пропорционально разделить между нашими элементами.
Это делается с помощью свойства flex-grow,
задаваемого флекс-элементам. Значением этого
свойства служит безразмерное число.
Применяется к: конкретному flex блоку.
Данное свойство входит как составная часть в свойство-сокращение
flex.
Синтаксис
селектор {
flex-grow: положительное число;
}
Значение по умолчанию: 0.
Пример
Сейчас у нас два флекс-блока с шириной в
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-direction,
которое задает направление осей flex блоков -
свойство
justify-content,
которое задает выравнивание по главной оси -
свойство
align-items,
которое задает выравнивание по поперечной оси -
свойство
flex-wrap,
которое многострочность flex блоков -
свойство
flex-flow,
сокращение для flex-direction и flex-wrap -
свойство
order,
которое задает порядок flex блоков -
свойство
align-self,
которое задает выравнивание одного блока -
свойство
flex-basis,
которое задает размер конкретного flex блока -
свойство
flex-shrink,
которое задает сжимаемость flex блоков -
свойство
flex,
сокращение для flex-grow, flex-shrink и flex-basis