Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 В прошлых уроках мы рассмотрели работу с флекс-контейнерами. Помимо этого у флекс-элементов, которые лежат внутри контейнера, также существует множество различных правил. В данном уроке мы рассмотрим правила flex-grow, которые позволяют управлять гибкостью элементов, то есть динамически определять их ширину/высоту в зависимости от наших потребностей.

2 В качестве примера мы возьмем три блока, расположенные во флекс-контейнере. Все примеры также будут сделаны вCodePen, поэтому обязательно меняйте в них значения и смотрите, к каким результатам это приведет.

3 <a>https://codepen.io/hexlet/pen/dyyOERb</a>

4 Свойство flex-grow (от англ. flex grow factor - "коэффициент увеличения flex") позволяет указать коэффициент увеличения элемента относительно свободного пространства внутри флекс-контейнера. Свободным пространством считается разница между размером флекс-контейнера и размером всех элементов внутри. Это важно, так как во многих источниках указано, что свойство flex-grow увеличивает размер элемента относительно других элементов контейнера.

5 Свойство flex-grow может принимать любоенеотрицательноезначение. Чтобы понять, что означает увеличение относительно свободного пространства, установим всем блокам одинаковое значение свойства flex-grow:

6 <a>https://codepen.io/hexlet/pen/rNNWgGq</a>

7 Может сложиться ощущение, что такое значение равномерно распределит место внутри флекс-контейнера. И в почти пустых блоках это действительно так, но давайте добавим текст в один из блоков и посмотрим, как сработает flex-grow в таком случае:

8 <a>https://codepen.io/hexlet/pen/BaaQgjY</a>

9 Теперь блоки совсем неодинаковой ширины. Это демонстрирует, что flex-grow распределяет только свободное пространство, которое остается после того, как блоки получат всю необходимую им ширину в зависимости от контента внутри. На самом деле все значения flex-grow в данном случае не нужны, так как блоки внутри контейнера уже займут всю доступную ширину. Попробуем добавить чуть больше контента в центральный блок и выставим ему различные значения:

10 <a>https://codepen.io/hexlet/pen/OJJbemZ</a>

11 <h2>Пример 0</h2>

12 У контейнера выставлена ширина в700пикселей. Это сделано для того, чтобы мы могли вычислить, как работает свойство flex-grow. Центральный блок имеет ширину300пикселей, а крайние блоки имеют ширину100пикселей. Свободное пространство обозначено серым цветом и равно200пикселям.

13 <h2>Пример 1</h2>

14 Добавив свойство flex-grow второму элементу, мы скажем растянуться центральному блоку на всю доступную ему ширину. Так как свободного пространства у нас 200 пикселей, то центральный блок заберет их себе, и ширина центрального блока станет500пикселей.

15 <h2>Пример 2</h2>

16 Оставим у центрального блока значение flex-grow: 1, а первому элементу внутри контейнера выставим значение flex-grow: 2. Попробуйте догадаться, как распределится место? Чтобы понять этот процесс, нужно взять общее количество частей, которое мы указали во flex-grow. Таких частей получилось три (flex-grow: 1 + flex-grow: 2).

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

18 flex-grow: 1 =200 / 3=66.67.

19 Исходя из этого, можно высчитать, сколько пикселей будет прибавлено каждому блоку со свойством flex-grow:

20 <ul><li>Центральный блок к своей ширине получит еще66.67пикселей</li>

21 <li>Первый блок внутри контейнера получит дополнительно133.34пикселя к своей ширине.</li>

22 </ul>Важно, что flex-grow толькодобавляетк ширине элемента, но не отбирает. Если свободного пространства внутри контейнера нет, то свойство flex-grow не будет иметь видимых эффектов.

23 Обратите внимание, что при flex-direction: column; свойство flex-grow влияет на высоту элемента. То есть flex-grow увеличивает элемент по главной оси.

24 <h2>Документация</h2>

25 <ul><li><a>flex-grow</a></li>

26 <li><a>!important</a></li>

27 </ul>