В прошлых уроках мы рассмотрели работу с флекс-контейнерами. Помимо этого у флекс-элементов, которые лежат внутри контейнера, также существует множество различных правил. В данном уроке мы рассмотрим правила flex-grow, которые позволяют управлять гибкостью элементов, то есть динамически определять их ширину/высоту в зависимости от наших потребностей.
В качестве примера мы возьмем три блока, расположенные во флекс-контейнере. Все примеры также будут сделаны в CodePen, поэтому обязательно меняйте в них значения и смотрите, к каким результатам это приведет.
See the Pen css_flex_grow by Hexlet (@hexlet) on CodePen.
Свойство flex-grow (от англ. flex grow factor — «коэффициент увеличения flex») позволяет указать коэффициент увеличения элемента относительно свободного пространства внутри флекс-контейнера. Свободным пространством считается разница между размером флекс-контейнера и размером всех элементов внутри. Это важно, так как во многих источниках указано, что свойство flex-grow увеличивает размер элемента относительно других элементов контейнера.
Свойство flex-grow может принимать любое неотрицательное значение. Чтобы понять, что означает увеличение относительно свободного пространства, установим всем блокам одинаковое значение свойства flex-grow:
See the Pen css_flex_grow_1 by Hexlet (@hexlet) on CodePen.
Может сложиться ощущение, что такое значение равномерно распределит место внутри флекс-контейнера. И в почти пустых блоках это действительно так, но давайте добавим текст в один из блоков и посмотрим, как сработает flex-grow в таком случае:
See the Pen css_flex_grow_1_with_text by Hexlet (@hexlet) on CodePen.
Теперь блоки совсем неодинаковой ширины. Это демонстрирует, что flex-grow распределяет только свободное пространство, которое остается после того, как блоки получат всю необходимую им ширину в зависимости от контента внутри. На самом деле все значения flex-grow в данном случае не нужны, так как блоки внутри контейнера уже займут всю доступную ширину. Попробуем добавить чуть больше контента в центральный блок и выставим ему различные значения:
See the Pen css_flex_flex_grow_1_with_text_1 by Hexlet (@hexlet) on CodePen.
Пример 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: 1 = 200 / 3 = 66.67.
Исходя из этого, можно высчитать, сколько пикселей будет прибавлено каждому блоку со свойством flex-grow:
- Центральный блок к своей ширине получит еще 66.67 пикселей
- Первый блок внутри контейнера получит дополнительно 133.34 пикселя к своей ширине.
Важно, что flex-grow только добавляет к ширине элемента, но не отбирает. Если свободного пространства внутри контейнера нет, то свойство flex-grow не будет иметь видимых эффектов.
Обратите внимание, что при flex-direction: column; свойство flex-grow влияет на высоту элемента. То есть flex-grow увеличивает элемент по главной оси.
Документация
- flex-grow
- !important
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
