Свойство 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>
текст текст
текст текст

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии