Свойство flex-grow
Коэффициент роста элемента контейнера flexbox. Задает сколько оставшегося пространства в контейнере flexbox должно быть назначено этому элементу
flex-grow: 1;- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
flex-grow: 0;
Элемент не будет расти, если есть свободное место. Он будет использовать только то пространство, которое ему необходимо
<style>
.example-1 {
display: flex;
outline: 2px dashed #ccc;
}
.example-1-item {
flex-grow: 0;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-1">
<div class="example-1-item">текст текст текст</div>
<div class="example-1-item">текст текст</div>
<div class="example-1-item">текст</div>
</div>flex-grow: 1;
Элемент заполнит оставшееся пространство, если ни один другой элемент flexbox не имеет значения flex-grow. Если для всех элементов контейнера flexbox задано flex-grow: 1; то все элементы распределят равномерно оставшееся пространство контейнера
<style>
.example-2 {
display: flex;
outline: 2px dashed #ccc;
}
.example-2-item {
flex-grow: 1;
padding: 5px;
margin: 2px;
background: #8ee391;
}
</style>
<div class="example-2">
<div class="example-2-item">текст текст текст</div>
<div class="example-2-item">текст текст</div>
<div class="example-2-item">текст</div>
</div>flex-grow: 2;
Значение flex-grow является относительным, его поведение зависит от значения родственных элементов контейнера flexbox.
Если в контейнере находятся два элемента, у одного flex-grow: 1; а у другого flex-grow: 2; то оставшееся в контейнере место распределиться пропорционально этим значениям. Элемент с flex-grow: 2; получит в два раза больше оставшегося пространства.
<style>
.example-3 {
display: flex;
outline: 2px dashed #ccc;
}
.example-3-item {
padding: 5px;
margin: 2px;
background: #8ee391;
}
.grow-1 {
flex-grow: 1;
}
.grow-2 {
flex-grow: 2;
}
</style>
<div class="example-3">
<div class="example-3-item grow-1">текст текст</div>
<div class="example-3-item grow-2">текст текст</div>
</div>