Свойство flex-grow
Свойство flex-grow определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо.
Например, если все flex-блоки внутри flex-контейнера имеют flex-grow: 1 , то они будут одинакового размера. Если один из них имеет flex-grow: 2 , то он будет в 2 раза больше, чем все остальные.
Если суммарная ширина элементов меньше ширины родителя, поэтому справа остается пустое пространство. При желании это пустое пространство можно пропорционально разделить между нашими элементами. Это делается с помощью свойства flex-grow , задаваемого флекс-элементам. Значением этого свойства служит безразмерное число.
Применяется к: конкретному flex блоку.
Данное свойство входит как составная часть в свойство-сокращение flex .
Синтаксис
Значение по умолчанию: 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 :
.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 :
.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 :
.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-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis
flex — grow
Может ли флекс-элемент занимать свободное пространство?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 11 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Это свойство указывает, может ли вырастать флекс-элемент при наличии свободного места, и на сколько.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере элемент с классом .item вырастет по ширине, игнорируя значение ширины и размер контента. Но только при наличии свободного места.
.container display: flex;> .item flex-grow: 1;>.container display: flex; > .item flex-grow: 1; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Если у всех флекс-элементов будет прописано flex — grow : 1 , то свободное пространство в контейнере будет равномерно распределено между ними всеми.
Если при этом одному из элементов мы зададим flex — grow : 2 , то он постарается занять в два раза больше свободного места, чем его соседи.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
По умолчанию значение равно 0. Значением может быть любое положительное целое число (включая 0).
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Очень удобно задать всем флекс-элементам flex — grow : 1 , и тогда они будут равного размера и займут всё внутреннее пространство родителя.
�� Свойство работает с пропорциональным разделением пространства, не с конкретными размерами. Разобраться во всём поможет статья «Как реально работает flex — grow ».
Полный список свойств флексбоксов можно посмотреть в гайде по flexbox.
- Chrome 59, поддерживается 59
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 11, поддерживается 11
Свойства Flex-элементов. Гибкость. Flex-grow — CSS: Основы Flex
В прошлых уроках мы рассмотрели работу с флекс-контейнерами. Помимо этого у флекс-элементов, которые лежат внутри контейнера, также существует множество различных правил. В данном уроке мы рассмотрим правила flex-grow , которые позволяют управлять гибкостью элементов, то есть динамически определять их ширину/высоту в зависимости от наших потребностей.
В качестве примера мы возьмем три блока, расположенные во флекс-контейнере. Все примеры также будут сделаны в CodePen, поэтому обязательно меняйте в них значения и смотрите, к каким результатам это приведет.
Свойство flex-grow (от англ. flex grow factor — «коэффициент увеличения flex») позволяет указать коэффициент увеличения элемента относительно свободного пространства внутри флекс-контейнера. Свободным пространством считается разница между размером флекс-контейнера и размером всех элементов внутри. Это важно, так как во многих источниках указано, что свойство flex-grow увеличивает размер элемента относительно других элементов контейнера.
Свойство flex-grow может принимать любое неотрицательное значение. Чтобы понять, что означает увеличение относительно свободного пространства, установим всем блокам одинаковое значение свойства flex-grow :
Может сложиться ощущение, что такое значение равномерно распределит место внутри флекс-контейнера. И в почти пустых блоках это действительно так, но давайте добавим текст в один из блоков и посмотрим, как сработает flex-grow в таком случае:
Теперь блоки совсем неодинаковой ширины. Это демонстрирует, что flex-grow распределяет только свободное пространство, которое остается после того, как блоки получат всю необходимую им ширину в зависимости от контента внутри. На самом деле все значения flex-grow в данном случае не нужны, так как блоки внутри контейнера уже займут всю доступную ширину. Попробуем добавить чуть больше контента в центральный блок и выставим ему различные значения:
Пример 0
У контейнера выставлена ширина в 700 пикселей. Это сделано для того, чтобы мы могли вычислить, как работает свойство flex-grow . Центральный блок имеет ширину 300 пикселей, а крайние блоки имеют ширину 100 пикселей. Свободное пространство обозначено серым цветом и равно 200 пикселям.
Пример 1
Добавив свойство flex-grow второму элементу, мы скажем растянуться центральному блоку на всю доступную ему ширину. Так как свободного пространства у нас 200 пикселей, то центральный блок заберет их себе, и ширина центрального блока станет 500 пикселей.
Пример 2
Оставим у центрального блока значение flex-grow: 1 , а первому элементу внутри контейнера выставим значение flex-grow: 2 . Попробуйте догадаться, как распределится место? Чтобы понять этот процесс, нужно взять общее количество частей, которое мы указали во flex-grow . Таких частей получилось три (flex-grow: 1 + flex-grow: 2).
Высчитаем, чему будет равняться одна часть, если мы знаем, что свободного пространства у нас 200 пикселей:
Исходя из этого, можно высчитать, сколько пикселей будет прибавлено каждому блоку со свойством flex-grow :
- Центральный блок к своей ширине получит еще 66.67 пикселей
- Первый блок внутри контейнера получит дополнительно 133.34 пикселя к своей ширине.
Важно, что flex-grow только добавляет к ширине элемента, но не отбирает. Если свободного пространства внутри контейнера нет, то свойство flex-grow не будет иметь видимых эффектов.
Обратите внимание, что при flex-direction: column; свойство flex-grow влияет на высоту элемента. То есть flex-grow увеличивает элемент по главной оси.
Документация
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
flex-grow¶
Свойство flex-grow определяет, сколько пространства может занимать флекс внутри контейнера.
В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.
Демо¶
Flexbox и выравнивание
Синтаксис¶
1 2 3 4 5 6 7 8
/* values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; Значения¶
Значение по-умолчанию: 0
Применяется к флекс-элементам
Принимаются целые числа. Отрицательные значения игнорируются.
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-flex-grow .
Спецификации¶
Поддержка браузерами¶
Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
html> head> meta charset="utf-8" /> title>flex-growtitle> style> form width: 400px; margin: auto; > p display: flex; > label margin-right: 10px; > input, select flex-grow: 1; > style> head> body> form action="handler.php"> p> label>Имя:label> input name="name" id="name" /> p> p> label >Какая у вас операционная система?:label > select name="os"> option value="1">Windowsoption> option value="2">Linuxoption> option value="3">Mac OSoption> select> p> p>button>Отправитьbutton>p> form> body> html>