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 57, поддерживается 57
- Edge 79, поддерживается 79
- Firefox 81, поддерживается 81
- Safari 9, поддерживается 9
Свойство 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¶
Свойство 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> См. также¶
Как реально работают flex — shrink и flex — grow
Механизм расчёта свободного места во флекс-контейнере при помощи свойств flex — grow и flex — shrink .
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
- flex-grow
- Что ещё здесь важно помнить?
Обновлено 2 октября 2023
flex — grow и flex — shrink — это CSS-свойства, определяющие, какое количество свободного пространства флекс-контейнера может занимать текущий элемент.
Рассмотрим каждое свойство в отдельности.
flex — grow
Скопировать ссылку «flex-grow» Скопировано
Создадим флекс-контейнер с двумя вложенными элемента с разными значениями flex — grow .
flex-grow: 2;flex-grow: 1;div class="container"> code class="container-item-grown">flex-grow: 2;code> code class="container-item-common">flex-grow: 1;code> div>.container display: flex; width: 1200px; height: 100px;> .container-item-grown background-color: #2E9AFF; flex-grow: 2;> .container-item-common background-color: #F498AD; flex-grow: 1;>.container display: flex; width: 1200px; height: 100px; > .container-item-grown background-color: #2E9AFF; flex-grow: 2; > .container-item-common background-color: #F498AD; flex-grow: 1; >У нас есть контейнер шириной 1200 px, для первого элемента указан flex — grow : 2 , а для второго — flex — grow : 1 . Первый элемент занимает 800 px, а второй 400 px.
Хочется думать, что здесь всё просто и работает по правилам математики:
- сложить значения свойства для каждого контейнера и получить 3 (2 + 1);
- поделить ширину контейнера на общее количество «частей» и получить 400 px (1200 px / 3);
- для каждого блока использовать значение flex — grow как вес и умножить на ширину одной части;
- для первого блока 400 px * 2 = 800 px;
- для второго блока 400 px * 1 = 400 px.
Пока всё верно. Однако, часто на практике мы ожидаем, что сейчас мы укажем flex — grow и это нас спасёт и… не работает.
Вот пример, такого «не работает».
Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>.container display: flex; width: 1200px;> .container-item-grown background-color: #2E9AFF; flex-grow: 2;> .container-item-common background-color: #F498AD; flex-grow: 1;>.container display: flex; width: 1200px; > .container-item-grown background-color: #2E9AFF; flex-grow: 2; > .container-item-common background-color: #F498AD; flex-grow: 1; >Пример отличается от предыдущего тем, что в блоках появился текст, обёрнутый в параграф. И результат таков, что блоки стали одинаковыми по ширине.
Получается, что логика рассуждений, приведённая выше, не работает?
Не совсем так, давайте разбираться.Деталь кроется в том, что flex — grow определяет, какое количество свободного места занимает элемент. И если внимательно посмотреть, то каждый блок текста занял по 600 px ширины, а свободного пространства не осталось. Поэтому и распределять нечего.
Почему же в первом примере всё работает ожидаемо? Там логика сработала, потому что для блоков не указана ширина и в них нет вложенных элементов, а значит ширина обоих 0 px, и свободное место — это и есть ширина контейнера, то есть 1200 px.
И что, если свободного места нет, то использовать flex — grow не получится? Не совсем, нужно просто добавить свойство flex — basis . Если использовать эти свойства в комплекте, то алгоритм расчёта ширины изменится.
flex — basis — это свойство, которое устанавливает начальный основной размер флекс-элемента. Его можно задать в любых единицах, в которых можно задать ширину элемента.
В результате мы получим то, чего хотим.
Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>.container display: flex; width: 1200px;> .container-item-grown background-color: #2E9AFF; flex-grow: 2; flex-basis: 800px;> .container-item-common background-color: #F498AD; flex-grow: 1; flex-basis: 400px;>.container display: flex; width: 1200px; > .container-item-grown background-color: #2E9AFF; flex-grow: 2; flex-basis: 800px; > .container-item-common background-color: #F498AD; flex-grow: 1; flex-basis: 400px; >Ещё один пример без flex — basis для закрепления. Попробуем задать ширину параграфов: для первого параграфа зададим 300 px, а для второго 600 px.
Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.div class="container"> div class="container-item-grown"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>.container display: flex; width: 1200px;> .container-item-grown background-color: #2E9AFF; flex-grow: 2;> .container-item-common background-color: #F498AD; flex-grow: 1;> .container-item-grown p width: 300px;> .container-item-common p width: 600px;>.container display: flex; width: 1200px; > .container-item-grown background-color: #2E9AFF; flex-grow: 2; > .container-item-common background-color: #F498AD; flex-grow: 1; > .container-item-grown p width: 300px; > .container-item-common p width: 600px; >Здесь получается не совсем ожидаемый от flex — grow результат, если не знать как работает свойство на самом деле. Но мы-то уже знаем, давайте посчитаем:
- Первый блок занимает 300 px. Это свойство задано для селектора p .
- Второй блок занимает 600 px. Причина всё та же — так задано в дочернем элементе.
- Итого, для распределения свойством flex — grow остаётся 300 px. Далее применим логику, которая была описана чуть выше, и…
- На первый элемент придётся 200 px, а на второй — всего 100 px.
- В итоге первый элемент займёт 500 px (300 px + 200 px), а второй — 700 px (600 px + 100 px).
Что ещё здесь важно помнить?
Скопировать ссылку «Что ещё здесь важно помнить?» Скопировано
Как работает свойство box-sizing. Вычисление свойства flex — basis также, как и свойства width зависит от box — sizing , и результат, в зависимости от указанного значения, будет разным.
flex — shrink
Скопировать ссылку «flex-shrink» Скопировано
Теперь посмотрим на свойство flex-shrink. Его мы используем в тех случаях, когда места не хватает и размеры элементов флекс-контейнера нужно уменьшить. Здесь математика чуть сложнее, вот пример:
Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия.div class="container"> div class="container-item-shrikned"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div class="container-item-common"> p> Равным образом сложившаяся структура организации требуют определения и уточнения модели развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. p> div> div>.container display: flex; width: 800px;> .container-item-shrinked background-color: #2E9AFF; flex-shrink: 2; flex-basis: 400px;> .container-item-common background-color: #F498AD; flex-shrink: 1; flex-basis: 800px;>.container display: flex; width: 800px; > .container-item-shrinked background-color: #2E9AFF; flex-shrink: 2; flex-basis: 400px; > .container-item-common background-color: #F498AD; flex-shrink: 1; flex-basis: 800px; >У нас в примере два элемента, у каждого есть изначальная ширина ( flex — basis равен 400 px и 800 px соответственно). Итого 1200 px. Однако ширина флекс-контейнера всего 800 px.
Сначала посчитаем общий вес при том, что для первого элемента значение flex — shrink составляет 2, а для второго — 1: 2 * 400 px + 1 * 800 px = 1600 px.
Для полноценного размещения нам не хватает 1200 px — 800 px = 400 px.Подсчёт сокращения будет выглядеть следующим образом:
- Пространство, которого не хватает, умножим на значение flex — shrink .
- Затем результат умножим на значение flex — basis .
- Результат предыдущего действия разделим на общий вес.
- 400 px * 2 * 400 px / 1600 px = 200 px
- 400 px * 1 * 800 px / 1600 px = 200 px
А в результате ширина блоков будет следующая:
- 400 px — 200 px = 200 px
- 800 px — 200 px = 600 px
Вывод: с помощью свойств flex — basis , flex — grow , flex — shrink можно предусмотреть как ситуации, когда контейнер окажется больше, чем элементы, в нём размещённые, так и наоборот — когда контейнер мал для элементов. А если знать как рассчитываются итоговые размеры, то можно избежать различных неожиданностей.