-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path11-flexbox.html
118 lines (100 loc) · 3.88 KB
/
11-flexbox.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Model</title>
<style>
body {
font-family: monospace;
}
.container {
border: 1px solid black;
height: 400px;
/* встановлення flex контейнера */
display: flex;
/* напрямок головної та поперечної осі (row) */
flex-direction: row;
/* вирівнювання елементів по головній осі (flex-start) */
justify-content: space-between;
/* вирівнювання елементів по поперечеій осі (stretch) */
align-items: center;
/* встановлення переносу елементів при нехватці місця (nowrap) */
flex-wrap: wrap;
/* вирівнювання рівнів елементів при наявності декількох рядків або колонок (stretch) */
align-content: space-around;
/* загальна властивість яка включає параметри: flex-direction || flex-wrap */
flex-flow: row wrap;
}
.item {
background-color: teal;
padding: 30px;
/* width: 90px; */
color: white;
text-align: center;
border: 1px solid rgb(0, 107, 107);
/* width/height = content + padding + border */
box-sizing: border-box;
/* flex-basis: 50%; */
/* загальна властивість яка включає параметри: flex-grow || flex-shrink || flex-basis */
flex: 1; /* flex-grow */
flex: 1 1; /* flex-grow flex-shrink */
flex: 1 10%; /* flex-grow flex-basis */
flex: 0 1 auto; /* default value for flex-grow flex-shrink flex-basis */
}
.item:nth-child(1) {
/* коефіцієнт розширенння елемента при нявності вільного місця (0) */
flex-grow: 1;
/* коефіцієнт звуження елемента при нехватці місця (1) */
flex-shrink: 0;
}
.item:nth-child(2) {
/* вирівнювання окремого елемента по головній осі */
align-self: flex-end;
}
.item:nth-child(3) {
min-width: 100px;
max-width: 150px;
/* ширина елемента */
flex-basis: 50%;
}
.item:nth-child(4) {
/* зміна порядку розміщення елемента (0) */
order: -1;
}
/* Example of row with 3 columns */
.row-3 {
margin-top: 20px;
border: 1px solid black;
display: flex;
/* відступ між елементами */
gap: 10px
}
.row-3 div {
background-color: darkblue;
border: 1px solid rgb(0, 242, 255);
color: white;
padding: 10px;
text-align: center;
/* flex-grow: 1; */
flex-basis: 33.33%;
}
</style>
</head>
<body>
<h2>Flexbox example</h2>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
<h2>Row layout example</h2>
<div class="row-3">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
</body>
</html>