0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Одна из главных "фишек" Flex - автоматический расчет расстояния между блоками. Давайте представим типичную верстку списка карточек товара в интернет-магазине.</p>
1
<p>Одна из главных "фишек" Flex - автоматический расчет расстояния между блоками. Давайте представим типичную верстку списка карточек товара в интернет-магазине.</p>
2
<p>В данном случае между карточками расстояние по 20 пикселей по горизонтали и вертикали. Попробуем воспроизвести такую структуру, используя свойство<strong>float</strong>, и посмотрим, с какими трудностями мы столкнемся.</p>
2
<p>В данном случае между карточками расстояние по 20 пикселей по горизонтали и вертикали. Попробуем воспроизвести такую структуру, используя свойство<strong>float</strong>, и посмотрим, с какими трудностями мы столкнемся.</p>
3
<p><a>https://codepen.io/hexlet/pen/bGGbEQe</a></p>
3
<p><a>https://codepen.io/hexlet/pen/bGGbEQe</a></p>
4
<p>Мы намеренно убрали весь текст, чтобы вы могли лучше увидеть расположение элементов без перехода на сайт CodePen. Обратите внимание, что для указания расстояния между карточками приходится использовать свойство<strong>margin</strong>, которое будет распространено на все элементы, и мы получим ненужный отступ справа у последней карточки, хотя его быть не должно. Эта проблема повредила нервы не одному поколению разработчиков. Они пытались выкрутиться самыми разными способами: использовали JavaScript; вручную выставляли класс, который отменит отступ; применяли псевдокласс<strong></strong></p>
4
<p>Мы намеренно убрали весь текст, чтобы вы могли лучше увидеть расположение элементов без перехода на сайт CodePen. Обратите внимание, что для указания расстояния между карточками приходится использовать свойство<strong>margin</strong>, которое будет распространено на все элементы, и мы получим ненужный отступ справа у последней карточки, хотя его быть не должно. Эта проблема повредила нервы не одному поколению разработчиков. Они пытались выкрутиться самыми разными способами: использовали JavaScript; вручную выставляли класс, который отменит отступ; применяли псевдокласс<strong></strong></p>
5
<p>, причем он появился только в стандарте CSS3.</p>
5
<p>, причем он появился только в стандарте CSS3.</p>
6
<p>С использованием Flex данная задача решается одним простым правилом<strong>justify-content</strong>, которое может принимать одно из следующих основных значений:</p>
6
<p>С использованием Flex данная задача решается одним простым правилом<strong>justify-content</strong>, которое может принимать одно из следующих основных значений:</p>
7
<p><em>все изменения производятся в классе .container</em></p>
7
<p><em>все изменения производятся в классе .container</em></p>
8
<ul><li><strong>center</strong>. Все элементы помещаются в центре. Перенесем нашу верстку во флекс-контейнер и выставим свойство<strong>justify-content</strong>. Для наглядности у<em>body</em>стоит серый фон, а у контейнера белый. Также во второй строке уменьшилось количество элементов для визуальной наглядности работы свойств. Обратите внимание, что элементы во второй строке расположились в центре, сохранив те же отступы между собой, как и в первой строке.</li>
8
<ul><li><strong>center</strong>. Все элементы помещаются в центре. Перенесем нашу верстку во флекс-контейнер и выставим свойство<strong>justify-content</strong>. Для наглядности у<em>body</em>стоит серый фон, а у контейнера белый. Также во второй строке уменьшилось количество элементов для визуальной наглядности работы свойств. Обратите внимание, что элементы во второй строке расположились в центре, сохранив те же отступы между собой, как и в первой строке.</li>
9
</ul><p><a>https://codepen.io/hexlet/pen/KKKPzwy</a></p>
9
</ul><p><a>https://codepen.io/hexlet/pen/KKKPzwy</a></p>
10
<ul><li><strong>flex-start</strong>. Элементы начинают располагаться с начала контейнера.</li>
10
<ul><li><strong>flex-start</strong>. Элементы начинают располагаться с начала контейнера.</li>
11
</ul><p><a>https://codepen.io/hexlet/pen/abboZvv</a></p>
11
</ul><p><a>https://codepen.io/hexlet/pen/abboZvv</a></p>
12
<ul><li><strong>flex-end</strong>. Элементы начинают располагаться с конца контейнера.</li>
12
<ul><li><strong>flex-end</strong>. Элементы начинают располагаться с конца контейнера.</li>
13
</ul><p><a>https://codepen.io/hexlet/pen/JjjPKGK</a></p>
13
</ul><p><a>https://codepen.io/hexlet/pen/JjjPKGK</a></p>
14
<ul><li><strong>space-between</strong>. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно занимают пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.</li>
14
<ul><li><strong>space-between</strong>. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно занимают пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.</li>
15
</ul><p><a>https://codepen.io/hexlet/pen/mddbEEq</a></p>
15
</ul><p><a>https://codepen.io/hexlet/pen/mddbEEq</a></p>
16
<ul><li><strong>space-around</strong>. Более хитрое значение. Элементы, так же, как и при<strong>space-between</strong>, автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс-контейнера. Эти отступы будут равны половине отступа между элементами.</li>
16
<ul><li><strong>space-around</strong>. Более хитрое значение. Элементы, так же, как и при<strong>space-between</strong>, автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс-контейнера. Эти отступы будут равны половине отступа между элементами.</li>
17
</ul><p><a>https://codepen.io/hexlet/pen/YzzKWGx</a></p>
17
</ul><p><a>https://codepen.io/hexlet/pen/YzzKWGx</a></p>
18
<ul><li><strong>space-evenly</strong>. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличие от<strong>space-around</strong>первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.</li>
18
<ul><li><strong>space-evenly</strong>. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличие от<strong>space-around</strong>первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.</li>
19
</ul><p><a>https://codepen.io/hexlet/pen/oNNvLGw</a></p>
19
</ul><p><a>https://codepen.io/hexlet/pen/oNNvLGw</a></p>
20
<p>Данные свойства помогут вам полноценно управлять отступами между элементами внутри флекс-контейнера и в любой момент изменять поведение с помощью смены всего одного значения, что очень удобно при создании адаптивных сайтов.</p>
20
<p>Данные свойства помогут вам полноценно управлять отступами между элементами внутри флекс-контейнера и в любой момент изменять поведение с помощью смены всего одного значения, что очень удобно при создании адаптивных сайтов.</p>
21
<h2>Выравнивание по поперечной оси</h2>
21
<h2>Выравнивание по поперечной оси</h2>
22
<p>Для выравнивания по поперечной оси существует свойство<em>align-items</em>. Оно принимает следующие значения:</p>
22
<p>Для выравнивания по поперечной оси существует свойство<em>align-items</em>. Оно принимает следующие значения:</p>
23
<ul><li>start</li>
23
<ul><li>start</li>
24
<li>end</li>
24
<li>end</li>
25
<li>center</li>
25
<li>center</li>
26
<li>stretch</li>
26
<li>stretch</li>
27
<li>baseline</li>
27
<li>baseline</li>
28
</ul><h3>Самостоятельное задание</h3>
28
</ul><h3>Самостоятельное задание</h3>
29
<p>Создайте контейнер с несколькими элементами внутри и поставьте ему свойство<strong>flex-direction</strong>отличное от стандартного. Попробуйте использовать свойство<strong>justify-content</strong>, чтобы увидеть, как оно заработает. Данная трансформация свойства может быть вначале немного непонятна, но в реальном проекте это очень хороший способ работы с выравниванием блоков.</p>
29
<p>Создайте контейнер с несколькими элементами внутри и поставьте ему свойство<strong>flex-direction</strong>отличное от стандартного. Попробуйте использовать свойство<strong>justify-content</strong>, чтобы увидеть, как оно заработает. Данная трансформация свойства может быть вначале немного непонятна, но в реальном проекте это очень хороший способ работы с выравниванием блоков.</p>
30
<h3>Документация</h3>
30
<h3>Документация</h3>
31
<ul><li><a>justify-content</a></li>
31
<ul><li><a>justify-content</a></li>
32
</ul>
32
</ul>