0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Помимо свойства<strong>flex-grow</strong>, которое мы изучили в прошлом уроке, для управления гибкостью элементов внутри флекс-контейнера существует еще два правила:<strong>flex-shrink</strong>и<strong>flex-basis</strong>.</p>
1
<p>Помимо свойства<strong>flex-grow</strong>, которое мы изучили в прошлом уроке, для управления гибкостью элементов внутри флекс-контейнера существует еще два правила:<strong>flex-shrink</strong>и<strong>flex-basis</strong>.</p>
2
<p>Как и в прошлом уроке, для рассмотрения этих правил возьмем три блока и с помощью<em>CodePen</em>узнаем, на что влияют значения правил.</p>
2
<p>Как и в прошлом уроке, для рассмотрения этих правил возьмем три блока и с помощью<em>CodePen</em>узнаем, на что влияют значения правил.</p>
3
<p><a>https://codepen.io/hexlet/pen/dyyOERb</a></p>
3
<p><a>https://codepen.io/hexlet/pen/dyyOERb</a></p>
4
<p>Не забывайте менять значения, чтобы увидеть, как будут меняться элементы.</p>
4
<p>Не забывайте менять значения, чтобы увидеть, как будут меняться элементы.</p>
5
<h3>flex-basis</h3>
5
<h3>flex-basis</h3>
6
<p>Свойство<strong>flex-basis</strong>указывает, какое пространство займет элемент на главной оси по умолчанию.</p>
6
<p>Свойство<strong>flex-basis</strong>указывает, какое пространство займет элемент на главной оси по умолчанию.</p>
7
<p>Может показаться, что<strong>flex-basis</strong>является заменой<strong>width/height</strong>, но на самом деле это немного не так.<strong>flex-basis</strong>может применяться<em>только</em>к элементам внутри флекс-контейнера, а также свойство работает по главной оси. Также, в отличие от свойств<strong>width</strong>или<strong>height</strong>, свойство<strong>flex-basis</strong>устанавливает лишь<em>оптимальную</em>ширину или высоту элемента<em>перед тем, как элемент окажется внутри контейнера</em>.</p>
7
<p>Может показаться, что<strong>flex-basis</strong>является заменой<strong>width/height</strong>, но на самом деле это немного не так.<strong>flex-basis</strong>может применяться<em>только</em>к элементам внутри флекс-контейнера, а также свойство работает по главной оси. Также, в отличие от свойств<strong>width</strong>или<strong>height</strong>, свойство<strong>flex-basis</strong>устанавливает лишь<em>оптимальную</em>ширину или высоту элемента<em>перед тем, как элемент окажется внутри контейнера</em>.</p>
8
<p><a>https://codepen.io/hexlet/pen/NWWdKoX</a></p>
8
<p><a>https://codepen.io/hexlet/pen/NWWdKoX</a></p>
9
<p>Для всех элементов внутри контейнера мы установили значение<strong>flex-basis: 200px</strong>. Так как размер нашего контейнера<em>600 пикселей</em>, то элементы идеально уместились внутри контейнера.</p>
9
<p>Для всех элементов внутри контейнера мы установили значение<strong>flex-basis: 200px</strong>. Так как размер нашего контейнера<em>600 пикселей</em>, то элементы идеально уместились внутри контейнера.</p>
10
<p>А что случится, если один из элементов будет иметь такой<strong>flex-basis</strong>, что суммарная ширина всех элементов превысит ширину флекс-контейнера? Попробуем изменить значение<strong>flex-basis</strong>для первого элемента внутри контейнера и зададим его в<em>400 пикселей</em>:</p>
10
<p>А что случится, если один из элементов будет иметь такой<strong>flex-basis</strong>, что суммарная ширина всех элементов превысит ширину флекс-контейнера? Попробуем изменить значение<strong>flex-basis</strong>для первого элемента внутри контейнера и зададим его в<em>400 пикселей</em>:</p>
11
<p><a>https://codepen.io/hexlet/pen/LYYxYPp</a></p>
11
<p><a>https://codepen.io/hexlet/pen/LYYxYPp</a></p>
12
<p>Произошла интересная вещь - блоки автоматически сузились так, чтобы поместиться внутри флекс-контейнера. Причем уменьшился как блок с<strong>flex-basis: 400px</strong>, так и блоки с<strong>flex-basis: 200px</strong>. Такое поведение не всегда однозначно, и браузеры автоматически высчитывают, в какой пропорции выдать блокам место внутри флекс-контейнера.</p>
12
<p>Произошла интересная вещь - блоки автоматически сузились так, чтобы поместиться внутри флекс-контейнера. Причем уменьшился как блок с<strong>flex-basis: 400px</strong>, так и блоки с<strong>flex-basis: 200px</strong>. Такое поведение не всегда однозначно, и браузеры автоматически высчитывают, в какой пропорции выдать блокам место внутри флекс-контейнера.</p>
13
<h3>flex-shrink</h3>
13
<h3>flex-shrink</h3>
14
<p>Еще мы можем контролировать возможность элемента ужиматься в зависимости от размеров флекс-контейнера. В этом помогает свойство<strong>flex-shrink</strong>. Если свойство<strong>flex-grow</strong>помогало нам распределить свободное пространство между элементами, то<strong>flex-shrink</strong>помогает распределить пространство, если места в контейнере недостаточно. По умолчанию все флекс-элементы имеют значение<strong>flex-shrink</strong>равное единице.</p>
14
<p>Еще мы можем контролировать возможность элемента ужиматься в зависимости от размеров флекс-контейнера. В этом помогает свойство<strong>flex-shrink</strong>. Если свойство<strong>flex-grow</strong>помогало нам распределить свободное пространство между элементами, то<strong>flex-shrink</strong>помогает распределить пространство, если места в контейнере недостаточно. По умолчанию все флекс-элементы имеют значение<strong>flex-shrink</strong>равное единице.</p>
15
<p>Обратимся снова к прошлому примеру, когда суммарный<strong>flex-basis</strong>элементов был больше, чем ширина контейнера. Для того, чтобы высчитать, сколько пространства будет срезано с каждого элемента, сначала нужно вычислить суммарную отрицательную ширину. Отрицательная ширина - ширина, которой нам не хватает для того, чтобы расположить все элементы в соответствии с их значениями<strong>flex-basis</strong>:</p>
15
<p>Обратимся снова к прошлому примеру, когда суммарный<strong>flex-basis</strong>элементов был больше, чем ширина контейнера. Для того, чтобы высчитать, сколько пространства будет срезано с каждого элемента, сначала нужно вычислить суммарную отрицательную ширину. Отрицательная ширина - ширина, которой нам не хватает для того, чтобы расположить все элементы в соответствии с их значениями<strong>flex-basis</strong>:</p>
16
<p><strong>Отрицательная ширина</strong>=<em>600</em>- (<em>400 + 200 + 200</em>) =<em>-200px</em></p>
16
<p><strong>Отрицательная ширина</strong>=<em>600</em>- (<em>400 + 200 + 200</em>) =<em>-200px</em></p>
17
<p>Теперь браузеру необходимо компенсировать эту отрицательную ширину за счет сужения всех блоков внутри флекс-контейнера. Для этого высчитывается общий вес всех элементов по формуле<em>значение flex-shrink умноженное на ширину блока</em>. В нашем случае получится следующая формула:</p>
17
<p>Теперь браузеру необходимо компенсировать эту отрицательную ширину за счет сужения всех блоков внутри флекс-контейнера. Для этого высчитывается общий вес всех элементов по формуле<em>значение flex-shrink умноженное на ширину блока</em>. В нашем случае получится следующая формула:</p>
18
<p><strong>Общий вес</strong>=<em>1 * 400</em>+<em>1 * 200</em>+<em>1 * 200</em>=<em>800</em>.</p>
18
<p><strong>Общий вес</strong>=<em>1 * 400</em>+<em>1 * 200</em>+<em>1 * 200</em>=<em>800</em>.</p>
19
<p>Теперь, чтобы узнать окончательную ширину каждого элемента в контейнере, нам необходимо:</p>
19
<p>Теперь, чтобы узнать окончательную ширину каждого элемента в контейнере, нам необходимо:</p>
20
<ul><li>Отрицательную ширину умножить на значение<strong>flex-shrink</strong>.</li>
20
<ul><li>Отрицательную ширину умножить на значение<strong>flex-shrink</strong>.</li>
21
<li>Разделить базовую ширину элемента на общий вес.</li>
21
<li>Разделить базовую ширину элемента на общий вес.</li>
22
<li>Перемножить полученные значения.</li>
22
<li>Перемножить полученные значения.</li>
23
</ul><p>Значения для блока<em>1</em>будет следующее:</p>
23
</ul><p>Значения для блока<em>1</em>будет следующее:</p>
24
<p><em>(-200 * 1) * (400 / 800)</em>=<em>-100px</em>. Именно на это значение будет уменьшен блок, если ему не хватает места.</p>
24
<p><em>(-200 * 1) * (400 / 800)</em>=<em>-100px</em>. Именно на это значение будет уменьшен блок, если ему не хватает места.</p>
25
<p>Для двух других блоков можно вычислить значения по этой же формуле и получить<em>-50px</em>.</p>
25
<p>Для двух других блоков можно вычислить значения по этой же формуле и получить<em>-50px</em>.</p>
26
<p>Значение<strong>flex-shrink: 0</strong>запретит блоку сжиматься.</p>
26
<p>Значение<strong>flex-shrink: 0</strong>запретит блоку сжиматься.</p>
27
<h3>flex</h3>
27
<h3>flex</h3>
28
<p>Свойство<strong>flex</strong>является сокращенной записью всех свойств, рассмотренных в этом и прошлом уроках. Это очень удобная форма записи, которая позволяет в одну строку задать все параметры, что положительно сказывается на чтении стилей. Спецификация также говорит о том, что<strong>flex</strong>является приоритетной формой записи. Свойства внутри<strong>flex</strong>записываются в следующем порядке:</p>
28
<p>Свойство<strong>flex</strong>является сокращенной записью всех свойств, рассмотренных в этом и прошлом уроках. Это очень удобная форма записи, которая позволяет в одну строку задать все параметры, что положительно сказывается на чтении стилей. Спецификация также говорит о том, что<strong>flex</strong>является приоритетной формой записи. Свойства внутри<strong>flex</strong>записываются в следующем порядке:</p>
29
<ul><li><strong>flex-grow</strong></li>
29
<ul><li><strong>flex-grow</strong></li>
30
<li><strong>flex-shrink</strong></li>
30
<li><strong>flex-shrink</strong></li>
31
<li><strong>flex-basis</strong></li>
31
<li><strong>flex-basis</strong></li>
32
</ul><h3>Документация</h3>
32
</ul><h3>Документация</h3>
33
<ul><li><a>flex</a></li>
33
<ul><li><a>flex</a></li>
34
<li><a>flex-basis</a></li>
34
<li><a>flex-basis</a></li>
35
<li><a>flex-shrink</a></li>
35
<li><a>flex-shrink</a></li>
36
</ul>
36
</ul>