0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В курсе по позиционированию рассматривался нормальный поток и возможные отклонения от него: плавающий поток, абсолютное и относительное позиционирование. Эти потоки построены на концепции блочных и строчных элементов. Так или иначе, все эти потоки управляли или изменяли именно эти элементы.</p>
1
<p>В курсе по позиционированию рассматривался нормальный поток и возможные отклонения от него: плавающий поток, абсолютное и относительное позиционирование. Эти потоки построены на концепции блочных и строчных элементов. Так или иначе, все эти потоки управляли или изменяли именно эти элементы.</p>
2
<p>Концепция<em>flex</em>вводит новые потоки, с которыми производится работа. Взгляните на картинку ниже</p>
2
<p>Концепция<em>flex</em>вводит новые потоки, с которыми производится работа. Взгляните на картинку ниже</p>
3
<p>Одним из главных нововведений стало полноценное использование осей<strong>x</strong>(<em>main axis/главная ось</em>) и<strong>y</strong>(<em>cross axis/поперечная ось</em>). Если при работе по оси<strong>x</strong>разработчики располагали элементы достаточно легко, то полноценная работа по оси<strong>y</strong>стала важной особенностью, благодаря которой верстать сложные пользовательские интерфейсы стало намного проще. Теперь мы имеем возможность управлять расположением элемента сразу по всем осям и в любом направлении.</p>
3
<p>Одним из главных нововведений стало полноценное использование осей<strong>x</strong>(<em>main axis/главная ось</em>) и<strong>y</strong>(<em>cross axis/поперечная ось</em>). Если при работе по оси<strong>x</strong>разработчики располагали элементы достаточно легко, то полноценная работа по оси<strong>y</strong>стала важной особенностью, благодаря которой верстать сложные пользовательские интерфейсы стало намного проще. Теперь мы имеем возможность управлять расположением элемента сразу по всем осям и в любом направлении.</p>
4
<p>В концепции<em>flex</em>все элементы располагаются в специальных контейнерах, которые называются<em>flex-container</em>. Благодаря наличию контейнера браузер понимает, как обрабатывать элементы внутри него. Это немного похоже на верстку таблиц, где все элементы должны располагаться внутри элемента <table>.</p>
4
<p>В концепции<em>flex</em>все элементы располагаются в специальных контейнерах, которые называются<em>flex-container</em>. Благодаря наличию контейнера браузер понимает, как обрабатывать элементы внутри него. Это немного похоже на верстку таблиц, где все элементы должны располагаться внутри элемента <table>.</p>
5
<p>Чтобы создать флекс-контейнер, блоку устанавливается правило display: flex. Теперь этот элемент является контейнером, а все элементы внутри начинают располагаться по осям<em>main</em>и<em>cross</em>.</p>
5
<p>Чтобы создать флекс-контейнер, блоку устанавливается правило display: flex. Теперь этот элемент является контейнером, а все элементы внутри начинают располагаться по осям<em>main</em>и<em>cross</em>.</p>
6
<p><a>Codepen</a></p>
6
<p><a>Codepen</a></p>
7
<p>Обратите внимание, что теперь дочерние блоки выстроились по оси<strong>x</strong>. Чтобы показать, что это три разных блока, был добавлен отступ справа. Но так делать не стоит. Так получится дополнительный отступ справа у последнего элемента, который зачастую не нужен. Flex позволяет более гибко распоряжаться расстоянием между блоками и их шириной, что мы изучим в следующих уроках.</p>
7
<p>Обратите внимание, что теперь дочерние блоки выстроились по оси<strong>x</strong>. Чтобы показать, что это три разных блока, был добавлен отступ справа. Но так делать не стоит. Так получится дополнительный отступ справа у последнего элемента, который зачастую не нужен. Flex позволяет более гибко распоряжаться расстоянием между блоками и их шириной, что мы изучим в следующих уроках.</p>
8
<p>Обратите также внимание, что флекс-контейнер не является блочным или строчным элементом. Это означает, что некоторые знакомые вам правила перестанут работать внутри этого контейнера. Некоторыми из таких правил являются:</p>
8
<p>Обратите также внимание, что флекс-контейнер не является блочным или строчным элементом. Это означает, что некоторые знакомые вам правила перестанут работать внутри этого контейнера. Некоторыми из таких правил являются:</p>
9
<ul><li>float</li>
9
<ul><li>float</li>
10
<li>clear</li>
10
<li>clear</li>
11
<li>табличные свойства. Например, vertical-align (но это правило прекрасно описывается другими свойствами внутри контейнера)</li>
11
<li>табличные свойства. Например, vertical-align (но это правило прекрасно описывается другими свойствами внутри контейнера)</li>
12
</ul><p>Помимо всего сказанного выше, Flex поможет вам в следующих ситуациях:</p>
12
</ul><p>Помимо всего сказанного выше, Flex поможет вам в следующих ситуациях:</p>
13
<ul><li>Быстрое создание адаптивного поведения для блоков.</li>
13
<ul><li>Быстрое создание адаптивного поведения для блоков.</li>
14
<li>Центровка блоков.</li>
14
<li>Центровка блоков.</li>
15
<li>Автоматически высчитывать высоту и ширину блоков без использования<em>JavaScript</em>.</li>
15
<li>Автоматически высчитывать высоту и ширину блоков без использования<em>JavaScript</em>.</li>
16
<li>Прижимание футера к низу страницы</li>
16
<li>Прижимание футера к низу страницы</li>
17
</ul><h3>Самостоятельное задание</h3>
17
</ul><h3>Самостоятельное задание</h3>
18
<p>Создайте, используя<a>CodePen</a>, блок со свойством display: flex и попробуйте добавлять различные элементы в этот контейнер. Посмотрите, как ведут себя строчные и блочные элементы внутри контейнера.</p>
18
<p>Создайте, используя<a>CodePen</a>, блок со свойством display: flex и попробуйте добавлять различные элементы в этот контейнер. Посмотрите, как ведут себя строчные и блочные элементы внутри контейнера.</p>