generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
146 lines (116 loc) · 8.98 KB
/
description.ru.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
---
name: Выравнивание элементов внутри контейнера
theory: |
Одна из главных фишек флекс — возможность выравнивание контента по любой из осей. Будь то главная или побочная ось, вы всегда можете воспользоваться несколькими свойствами, чтобы автоматически разместить элементы на странице.
В этом уроке мы изучим свойства `justify-content` и `align-items`, которые позволяют расположить элементы по главной и побочной оси соответственно.
Для разбора работы свойств используем следующий пример:
<div class="hexlet-basics-example my-3">
<div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
</div>
Серым цветом обозначен Flex-контейнер. Именно к нему и будут применяться все свойства из этого урока
## Выравнивание по главной оси
Для выравнивания по главной оси используется свойство `justify-content`. Оно указывается у контейнера (блок со свойством `display: flex`) и может иметь множество значений. Разберём самые распространённые значения:
* `flex-start` — выравнивание по началу оси. Хоть это и не значение по умолчанию, но оно выглядит именно так, как на примере выше
* `flex-end` — выравнивание по концу оси
* `center` — выравнивание контента по центру контейнера
* `space-between` — первый и последний элемент прижимаются к началу и концу оси, а остальные элементы распределяются по остальному пространству
* `space-around` — принцип такой же, как и у значения `space-between`, но первый и последний элемент так же получают отступы, которые равны половине отступов у остальных элементов
<div class="hexlet-basics-example my-3">
<p class="h3">flex-start</p>
<div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">flex-end</p>
<div class="bg-opacity-25 bg-secondary d-flex justify-content-end fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">center</p>
<div class="bg-opacity-25 bg-secondary d-flex justify-content-center fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">space-between</p>
<div class="bg-opacity-25 bg-secondary d-flex justify-content-between fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">space-around</p>
<div class="bg-opacity-25 bg-secondary d-flex justify-content-around fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
</div>
## Выравнивание по побочной оси
Помимо выравнивания элементов по главной оси, флекс позволяет одновременно выравнять элементы по побочной оси. Именно для понимания этого эффекта примеры в этом уроке имеют большую высоту контейнера чем необходимо.
Чтобы выровнять элементы по побочной оси используется свойство `align-items`. В нём также много значений, но рассмотрим работу самых популярных:
* `flex-start` — выравнивание по началу побочной оси
* `flex-end` — выравнивание по концу побочной оси
* `center` — выравнивание по центру
<div class="hexlet-basics-example my-3">
<p class="h3">flex-start</p>
<div class="bg-opacity-25 bg-secondary d-flex fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">flex-end</p>
<div class="bg-opacity-25 bg-secondary d-flex align-items-end fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
<p class="h3">center</p>
<div class="bg-opacity-25 bg-secondary d-flex align-items-center fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
</div>
Как видите, значений тут сильно меньше, чем при выравнивании по главной оси. Помните про две оси — если воспользоваться свойством `flex-direction: column`, то визуально выравнивание изменится. В этом случае для выравнивания по вертикали будет использоваться свойство `justify-content`:
<div class="hexlet-basics-example my-3">
<p class="h3">flex-direction: column и justify-content: space-between</p>
<div class="bg-opacity-25 bg-secondary d-flex flex-column justify-content-between fw-bold gap-2 mb-3" style="height: 200px;">
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">1</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">2</div>
<div class="bg-warning ps-2" style="width: 50px; height: 50px;">3</div>
</div>
</div>
instructions: |
Заказчик захотел, чтобы в блоке «Вопрос-ответ» появилась стрелка, которая визуально свяжет вопрос и ответ. Доработайте функционал блока
```html
<style>
.qa {
font: 18px/1.5 sans-serif;
}
.question {
width: 400px;
padding: 20px;
color: #fff;
background: #8ea7e9;
}
.answer {
width: 400px;
padding: 20px;
}
.arrow {
margin: 0 10px;
}
</style>
<div class="qa">
<div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
<div class="arrow">→</div>
<div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
</div>
```
Стрелка визуально находится по середине относительно блоков с вопросом и ответом. Используя Flex доработайте блок и, используя выравнивание, разместите блоки по центру