0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Помимо работы с гибкостью элементов, модуль Flex позволяет для каждого элемента внутри флекс-контейнера устанавливать месторасположение относительно других элементов. Для этого существует два свойства, которые мы рассмотрим в этом уроке:</p>
1
<p>Помимо работы с гибкостью элементов, модуль Flex позволяет для каждого элемента внутри флекс-контейнера устанавливать месторасположение относительно других элементов. Для этого существует два свойства, которые мы рассмотрим в этом уроке:</p>
2
<ul><li><strong>order</strong></li>
2
<ul><li><strong>order</strong></li>
3
<li><strong>align-self</strong></li>
3
<li><strong>align-self</strong></li>
4
</ul><p>Для рассмотрения этих свойств возьмем<em>CodePen</em>и расположим три элемента внутри флекс-контейнера. Как и в прошлых уроках, вы можете изменять код внутри<em>CodePen</em>, что очень поможет вам в изучении данных свойств.</p>
4
</ul><p>Для рассмотрения этих свойств возьмем<em>CodePen</em>и расположим три элемента внутри флекс-контейнера. Как и в прошлых уроках, вы можете изменять код внутри<em>CodePen</em>, что очень поможет вам в изучении данных свойств.</p>
5
<p><a>https://codepen.io/hexlet/pen/LYYWLgZ</a></p>
5
<p><a>https://codepen.io/hexlet/pen/LYYWLgZ</a></p>
6
<p>Блоки специально сделаны разной высоты для большей наглядности работы свойств.</p>
6
<p>Блоки специально сделаны разной высоты для большей наглядности работы свойств.</p>
7
<h3>order</h3>
7
<h3>order</h3>
8
<p>Свойство<strong>order</strong>отвечает за порядок расположения элементов внутри контейнера. Это удобная функция, позволяющая, например, перемещать элементы внутри контейнера при открытии страницы на разных устройствах.</p>
8
<p>Свойство<strong>order</strong>отвечает за порядок расположения элементов внутри контейнера. Это удобная функция, позволяющая, например, перемещать элементы внутри контейнера при открытии страницы на разных устройствах.</p>
9
<p>В качестве значения<strong>order</strong>может принимать любое число, которое укажет номер расположения элемента по главной оси. Попробуем поменять первый и третий элемент внутри нашего демонстрационного примера:</p>
9
<p>В качестве значения<strong>order</strong>может принимать любое число, которое укажет номер расположения элемента по главной оси. Попробуем поменять первый и третий элемент внутри нашего демонстрационного примера:</p>
10
<p><a>https://codepen.io/hexlet/pen/ExxWXMV</a></p>
10
<p><a>https://codepen.io/hexlet/pen/ExxWXMV</a></p>
11
<p>Также возможно использование отрицательного значения. В таком случае никакой магии не произойдет, просто элементы с отрицательным значением<strong>order</strong>будут находиться раньше элементов с положительным значением.</p>
11
<p>Также возможно использование отрицательного значения. В таком случае никакой магии не произойдет, просто элементы с отрицательным значением<strong>order</strong>будут находиться раньше элементов с положительным значением.</p>
12
<p>Обратите внимание, что если свойство<strong>order</strong>указано не у всех элементов, то элементы без этого свойства будут выведены в месте, согласно своему расположению внутри документа. Причем первыми всегда будут выведены те элементы, у которых свойство<strong>order</strong>отсутствует, что наглядно видно в примере ниже:</p>
12
<p>Обратите внимание, что если свойство<strong>order</strong>указано не у всех элементов, то элементы без этого свойства будут выведены в месте, согласно своему расположению внутри документа. Причем первыми всегда будут выведены те элементы, у которых свойство<strong>order</strong>отсутствует, что наглядно видно в примере ниже:</p>
13
<p><a>https://codepen.io/hexlet/pen/mddWMKz</a></p>
13
<p><a>https://codepen.io/hexlet/pen/mddWMKz</a></p>
14
<p>Такое поведение будет только в случае положительных значений свойства order. Элементы с отрицательным order расположатся до элементов без этого свойства. Это связано с тем, что flex-элементы по умолчанию имеют значение свойства order равное нулю.</p>
14
<p>Такое поведение будет только в случае положительных значений свойства order. Элементы с отрицательным order расположатся до элементов без этого свойства. Это связано с тем, что flex-элементы по умолчанию имеют значение свойства order равное нулю.</p>
15
<p>Цвета элементов без свойства<strong>order</strong>были сделаны немного темнее, чтобы точно можно было соотнести их расположение в браузере и в верстке. Приглядитесь к тому, где расположены блоки с классами .bg-red-one, bg-green-two и bg-blue-three. Поэтому, если хотите сохранить полный контроль над расположением блоков, выставляйте свойство<strong>order</strong>для всех элементов внутри контейнера, если это свойство вам понадобилось.</p>
15
<p>Цвета элементов без свойства<strong>order</strong>были сделаны немного темнее, чтобы точно можно было соотнести их расположение в браузере и в верстке. Приглядитесь к тому, где расположены блоки с классами .bg-red-one, bg-green-two и bg-blue-three. Поэтому, если хотите сохранить полный контроль над расположением блоков, выставляйте свойство<strong>order</strong>для всех элементов внутри контейнера, если это свойство вам понадобилось.</p>
16
<h3>align-self</h3>
16
<h3>align-self</h3>
17
<p>Свойство<strong>align-self</strong>по своему назначению похоже на свойство<strong>align-items</strong>, которое мы рассмотрели в одном из прошлых уроков. Главным отличием является то, что свойство<strong>align-self</strong>применяется не ко всему флекс-контейнеру, а к одному конкретному элементу внутри контейнера, для которого мы хотим сменить расположение по поперечной оси.</p>
17
<p>Свойство<strong>align-self</strong>по своему назначению похоже на свойство<strong>align-items</strong>, которое мы рассмотрели в одном из прошлых уроков. Главным отличием является то, что свойство<strong>align-self</strong>применяется не ко всему флекс-контейнеру, а к одному конкретному элементу внутри контейнера, для которого мы хотим сменить расположение по поперечной оси.</p>
18
<p>Основными значениями свойства<strong>align-self</strong>являются:</p>
18
<p>Основными значениями свойства<strong>align-self</strong>являются:</p>
19
<ul><li><strong>center</strong></li>
19
<ul><li><strong>center</strong></li>
20
<li><strong>flex-start</strong></li>
20
<li><strong>flex-start</strong></li>
21
<li><strong>flex-end</strong></li>
21
<li><strong>flex-end</strong></li>
22
<li><strong>baseline</strong></li>
22
<li><strong>baseline</strong></li>
23
</ul><p><a>https://codepen.io/hexlet/pen/RwwpjyV</a></p>
23
</ul><p><a>https://codepen.io/hexlet/pen/RwwpjyV</a></p>
24
<p>В данном<em>CodePen</em>были добавлены следующие классы:</p>
24
<p>В данном<em>CodePen</em>были добавлены следующие классы:</p>
25
<ul><li><strong>align-self-center</strong></li>
25
<ul><li><strong>align-self-center</strong></li>
26
<li><strong>align-self-start</strong></li>
26
<li><strong>align-self-start</strong></li>
27
<li><strong>align-self-end</strong></li>
27
<li><strong>align-self-end</strong></li>
28
<li><strong>align-self-baseline</strong></li>
28
<li><strong>align-self-baseline</strong></li>
29
</ul><p>Попробуйте изменять классы внутри контейнера, чтобы увидеть, как будет расположен элемент.</p>
29
</ul><p>Попробуйте изменять классы внутри контейнера, чтобы увидеть, как будет расположен элемент.</p>
30
<h3>Документация</h3>
30
<h3>Документация</h3>
31
<ul><li><a>order</a></li>
31
<ul><li><a>order</a></li>
32
<li><a>align-self</a></li>
32
<li><a>align-self</a></li>
33
</ul>
33
</ul>