0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Главной частью концепции Flex является контейнер. Внутри него дочерние элементы начинают подчиняться новой логике, ее мы рассмотрели в прошлом уроке.</p>
1
<p>Главной частью концепции Flex является контейнер. Внутри него дочерние элементы начинают подчиняться новой логике, ее мы рассмотрели в прошлом уроке.</p>
2
<h3>Display</h3>
2
<h3>Display</h3>
3
<p>Чтобы создать контейнер, используется свойство display со значением flex. Сам контейнер внешне поведет себя как блочный элемент - будет занимать всю доступную ширину. Следовательно, остальные элементы будут отображаться выше или ниже него, в зависимости от их расположения в потоке документа.</p>
3
<p>Чтобы создать контейнер, используется свойство display со значением flex. Сам контейнер внешне поведет себя как блочный элемент - будет занимать всю доступную ширину. Следовательно, остальные элементы будут отображаться выше или ниже него, в зависимости от их расположения в потоке документа.</p>
4
<p>Другим возможным значением свойства display является inline-flex. Внутри такого контейнера все будет происходить точно так же, как и при значении flex, но сам контейнер по поведению будет напоминать строчный элемент - он займет ровно столько пространства, сколько необходимо. Другие элементы в потоке смогут обтекать его при необходимости и наличии свободного пространства.</p>
4
<p>Другим возможным значением свойства display является inline-flex. Внутри такого контейнера все будет происходить точно так же, как и при значении flex, но сам контейнер по поведению будет напоминать строчный элемент - он займет ровно столько пространства, сколько необходимо. Другие элементы в потоке смогут обтекать его при необходимости и наличии свободного пространства.</p>
5
<p><a>Codepen</a></p>
5
<p><a>Codepen</a></p>
6
<h3>Flex Direction</h3>
6
<h3>Flex Direction</h3>
7
<p>Что же мы можем сделать с контейнером? Одна из распространенных задач с использованием флекса - перестраивание элементов с оси<strong>x</strong>на ось<strong>y</strong>. Это очень частая ситуация при создании мобильных версий сайта. Предположим, что есть флекс-контейнер с тремя дочерними элементами, которые в обычной ситуации отображаются в одну линию.</p>
7
<p>Что же мы можем сделать с контейнером? Одна из распространенных задач с использованием флекса - перестраивание элементов с оси<strong>x</strong>на ось<strong>y</strong>. Это очень частая ситуация при создании мобильных версий сайта. Предположим, что есть флекс-контейнер с тремя дочерними элементами, которые в обычной ситуации отображаются в одну линию.</p>
8
<p><a>Codepen</a></p>
8
<p><a>Codepen</a></p>
9
<p>Используя правило flex-direction, мы можем изменить главную ось для отображения элементов. Правило flex-direction принимает одно из нескольких значений:</p>
9
<p>Используя правило flex-direction, мы можем изменить главную ось для отображения элементов. Правило flex-direction принимает одно из нескольких значений:</p>
10
<ul><li><strong>column</strong>. Значение устанавливает в качестве главной оси ось<strong>y</strong>. Таким образом меняется не только направление, но и правила выравнивания элементов, которые мы изучим в следующих уроках. В качестве поперечной оси начинает выступать ось<strong>x</strong>. Данное поведение похоже на то, как если бы систему координат повернули на 90 градусов.</li>
10
<ul><li><strong>column</strong>. Значение устанавливает в качестве главной оси ось<strong>y</strong>. Таким образом меняется не только направление, но и правила выравнивания элементов, которые мы изучим в следующих уроках. В качестве поперечной оси начинает выступать ось<strong>x</strong>. Данное поведение похоже на то, как если бы систему координат повернули на 90 градусов.</li>
11
</ul><p><a>Codepen</a></p>
11
</ul><p><a>Codepen</a></p>
12
<ul><li><strong>column-reverse</strong>. Данное значение также выставляет в качестве главной оси ось<strong>y</strong>, но как бы "переворачивает ее". Элементы в потоке начинают отображаться с конца.</li>
12
<ul><li><strong>column-reverse</strong>. Данное значение также выставляет в качестве главной оси ось<strong>y</strong>, но как бы "переворачивает ее". Элементы в потоке начинают отображаться с конца.</li>
13
</ul><p><a>Codepen</a></p>
13
</ul><p><a>Codepen</a></p>
14
<ul><li><p><strong>row</strong>. Стандартное отображение. В качестве главной оси выступает ось<strong>x</strong>.</p>
14
<ul><li><p><strong>row</strong>. Стандартное отображение. В качестве главной оси выступает ось<strong>x</strong>.</p>
15
</li>
15
</li>
16
<li><p><strong>row-reverse</strong>. Элементы выстраиваются по оси<strong>x</strong>, но с конца оси. Элементы также меняют свой порядок.</p>
16
<li><p><strong>row-reverse</strong>. Элементы выстраиваются по оси<strong>x</strong>, но с конца оси. Элементы также меняют свой порядок.</p>
17
</li>
17
</li>
18
</ul><p><a>Codepen</a></p>
18
</ul><p><a>Codepen</a></p>
19
<h3>Самостоятельное задание</h3>
19
<h3>Самостоятельное задание</h3>
20
<p>Создайте, используя<a>CodePen</a>, флекс-контейнер, внутри которого создайте еще один флекс-контейнер. Установите им разные значения flex-direction, чтобы увидеть, как элементы внутри этих контейнеров будут отображены в браузере.</p>
20
<p>Создайте, используя<a>CodePen</a>, флекс-контейнер, внутри которого создайте еще один флекс-контейнер. Установите им разные значения flex-direction, чтобы увидеть, как элементы внутри этих контейнеров будут отображены в браузере.</p>
21
<h3>Документация</h3>
21
<h3>Документация</h3>
22
<ul><li><a>flex-direction</a></li>
22
<ul><li><a>flex-direction</a></li>
23
</ul>
23
</ul>