0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p><strong>Flexbox</strong>представляет собой общее название модуля<strong>Flexible Box Layout</strong>, существующего в CSS. Это модуль, который определяет режим компоновки либо верстки пользовательского интерфейса, именуемого<strong>flex layout</strong>. В этом отношении Flexbox -- это, по сути, другой подход к созданию пользовательского интерфейса, который заметно отличается от классической блочной либо табличной верстки.</p>
1
<p><strong>Flexbox</strong>представляет собой общее название модуля<strong>Flexible Box Layout</strong>, существующего в CSS. Это модуль, который определяет режим компоновки либо верстки пользовательского интерфейса, именуемого<strong>flex layout</strong>. В этом отношении Flexbox -- это, по сути, другой подход к созданию пользовательского интерфейса, который заметно отличается от классической блочной либо табличной верстки.</p>
2
<p>Используя<strong>Flexbox</strong>, создавать сложные и комплексные интерфейсы проще, ведь мы легко сможем переопределить направление и выравнивание элементов, создать адаптивные табличные представления. Вдобавок ко всему, Flexbox относительно прост в применении.</p>
2
<p>Используя<strong>Flexbox</strong>, создавать сложные и комплексные интерфейсы проще, ведь мы легко сможем переопределить направление и выравнивание элементов, создать адаптивные табличные представления. Вдобавок ко всему, Flexbox относительно прост в применении.</p>
3
<p>Главные составляющие компоновки flexbox:</p>
3
<p>Главные составляющие компоновки flexbox:</p>
4
<ul><li>flex-контейнер (flex container);</li>
4
<ul><li>flex-контейнер (flex container);</li>
5
<li>flex-элементы (flex items).</li>
5
<li>flex-элементы (flex items).</li>
6
</ul><p>При этом flex container -- это элемент, внутри которого располагаются flex-элементы.</p>
6
</ul><p>При этом flex container -- это элемент, внутри которого располагаются flex-элементы.</p>
7
<h2>Ключевые понятия</h2>
7
<h2>Ключевые понятия</h2>
8
<p>Стоит отметить такое ключевое понятие, как<strong>main axis</strong>(центральная ось). На деле речь идет об условной оси во flex-контейнере, вдоль которой и позиционируются flex-элементы.</p>
8
<p>Стоит отметить такое ключевое понятие, как<strong>main axis</strong>(центральная ось). На деле речь идет об условной оси во flex-контейнере, вдоль которой и позиционируются flex-элементы.</p>
9
<p>Идем далее. Элементы в контейнере могут размещаться как по горизонтали в качестве строки, так и по вертикали в качестве столбца. С учетом типа расположения, меняется и центральная ось. Если у нас расположение в виде строки, тогда центральная ось является горизонтальной и направлена слева направо. Если в виде столбца, -- вертикально сверху вниз.</p>
9
<p>Идем далее. Элементы в контейнере могут размещаться как по горизонтали в качестве строки, так и по вертикали в качестве столбца. С учетом типа расположения, меняется и центральная ось. Если у нас расположение в виде строки, тогда центральная ось является горизонтальной и направлена слева направо. Если в виде столбца, -- вертикально сверху вниз.</p>
10
<p>Соответственно, конец и начало центральной оси описывают термины<strong>main end/main start</strong>, ну а расстояние между между ними обозначают как<strong>main size</strong>.</p>
10
<p>Соответственно, конец и начало центральной оси описывают термины<strong>main end/main start</strong>, ну а расстояние между между ними обозначают как<strong>main size</strong>.</p>
11
<p>Однако существует не только основная ось, но и поперечная. Она перпендикулярна основной и именуется<strong>cross axis</strong>. Если элементы располагаются в виде строки, то cross axis направлена сверху вниз, если в виде столбца, -- слева направо. Начало поперечной оси -- это<strong>cross start</strong>, конец --<strong>cross end</strong>, расстояние между ними --<strong>cross size</strong>.</p>
11
<p>Однако существует не только основная ось, но и поперечная. Она перпендикулярна основной и именуется<strong>cross axis</strong>. Если элементы располагаются в виде строки, то cross axis направлена сверху вниз, если в виде столбца, -- слева направо. Начало поперечной оси -- это<strong>cross start</strong>, конец --<strong>cross end</strong>, расстояние между ними --<strong>cross size</strong>.</p>
12
<p>Таким образом, когда элементы расположены в строку,<strong>main size</strong>представляет ширину контейнера/элементов, а<strong>cross size</strong>-- высоту. Когда элементы расположены в столбик, все<strong>наоборот</strong>.</p>
12
<p>Таким образом, когда элементы расположены в строку,<strong>main size</strong>представляет ширину контейнера/элементов, а<strong>cross size</strong>-- высоту. Когда элементы расположены в столбик, все<strong>наоборот</strong>.</p>
13
<h2>Создаем flex-контейнер</h2>
13
<h2>Создаем flex-контейнер</h2>
14
<p>Чтобы создать flex-контейнер, надо присвоить стилевому свойству display одно из 2-х значений: либо flex, либо inline-flex.</p>
14
<p>Чтобы создать flex-контейнер, надо присвоить стилевому свойству display одно из 2-х значений: либо flex, либо inline-flex.</p>
15
<p>Вот как выглядит создание простейшей web-страницы с применением<strong>flexbox</strong>:</p>
15
<p>Вот как выглядит создание простейшей web-страницы с применением<strong>flexbox</strong>:</p>
16
<p>Обратите внимание, что для контейнера flex-container устанавливается свойство<strong>display:flex</strong>, в котором располагаются 3 flex-элемента.</p>
16
<p>Обратите внимание, что для контейнера flex-container устанавливается свойство<strong>display:flex</strong>, в котором располагаются 3 flex-элемента.</p>
17
<p>Важно отметить следующее: если значение<strong>flex</strong>определяет контейнер в качестве блочного элемента, то<strong>inline-flex</strong>определяет элемент в качестве строчного (inline).</p>
17
<p>Важно отметить следующее: если значение<strong>flex</strong>определяет контейнер в качестве блочного элемента, то<strong>inline-flex</strong>определяет элемент в качестве строчного (inline).</p>
18
<p>Давайте рассмотрим примеры обоих вариантов.</p>
18
<p>Давайте рассмотрим примеры обоих вариантов.</p>
19
<p>Остается добавить, что в первом варианте flex-контейнер растягивается по ширине веб-страницы, а во втором -- занимает как раз столько места, сколько нужно для flex-элементов.</p>
19
<p>Остается добавить, что в первом варианте flex-контейнер растягивается по ширине веб-страницы, а во втором -- занимает как раз столько места, сколько нужно для flex-элементов.</p>
20
<p><em>По материалам https://metanit.com/web/html5/.</em></p>
20
<p><em>По материалам https://metanit.com/web/html5/.</em></p>
21
21