generated from hexlet-basics/exercises-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
description.ru.yml
92 lines (75 loc) · 5.4 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
---
name: Перенос элементов внутри контейнера
theory: |
В прошлых примерах использовалось достаточно малое количество элементов внутри флекс-контейнера. Представим, что этих элементов больше и они не могут поместиться внутри контейнера.
В этом случае элементы выйдут за пределы контейнера и продолжат располагаться на главной оси, так как, по умолчанию, контейнер не переносит элементы.
В примере ниже ширина контейнера обозначена синим цветом, а между элементами есть пространство, чтобы понять, когда элементы вышли за пределы контейнера:
<div class="hexlet-basics-example my-3">
<div class="d-flex bg-primary gap-2 w-50">
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;"></div>
</div>
</div>
Чтобы определить, как поведут себя элементы при нехватке пространства используется свойство `flex-wrap`, которое принимает одно из значений:
* `nowrap` — значение по умолчанию. Элементы не переносятся
* `wrap` — самое распространенное значение. Элементы переносятся при нехватке пространства внутри контейнера
* `wrap-reverse` — перенос элементов с переворотом порядка элементов по главной оси. Этот порядок удобен при создании блогов, так как более старые записи окажутся внизу
Вот как располагаются элементы при использовании этих значений:
<div class="hexlet-basics-example my-3">
<p class="h3">nowrap</p>
<div class="d-flex bg-primary gap-2 w-50 mb-3">
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
</div>
<p class="h3">wrap</p>
<div class="d-flex flex-wrap bg-primary gap-2 w-50 mb-3">
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
</div>
<p class="h3">wrap-reverse</p>
<div class="d-flex flex-wrap-reverse bg-primary gap-2 w-50 mb-3">
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">1</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">2</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">3</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">4</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">5</div>
<div class="bg-info flex-shrink-0" style="width: 50px; height: 50px;">6</div>
</div>
</div>
instructions: |
В этом уроке мы снова вернёмся к стилизации блока «Вопрос-ответ». В этот раз у него жестко ограничена ширина для элементов, поэтому их стоит переносить, если недостаточно места.
```html
<style>
.qa {
font: 18px/1.5 sans-serif;
display: flex;
}
.question {
width: 400px;
padding: 20px;
color: #fff;
background: #8ea7e9;
}
.answer {
width: 400px;
padding: 20px;
}
</style>
<div class="qa">
<div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
<div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
</div>
```
Доработайте функционал вёрстки. Проверить её можно уменьшив окно вашего браузера