Skip to content

Commit ac6142c

Browse files
mirmak4mirmak4
committed
Created flex container, using display flex, align-items, justify-content and gap properties. Added several flex items, using align-self and order properties.
1 parent 44a6030 commit ac6142c

File tree

2 files changed

+238
-206
lines changed

2 files changed

+238
-206
lines changed

‎starter/04-CSS-Layouts/flexbox.html

Lines changed: 79 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,84 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Flexbox</title>
8-
<style>
9-
.el--1 {
10-
background-color: blueviolet;
11-
}
12-
.el--2 {
13-
background-color: orangered;
14-
}
15-
.el--3 {
16-
background-color: green;
17-
height: 150px;
18-
}
19-
.el--4 {
20-
background-color: goldenrod;
21-
}
22-
.el--5 {
23-
background-color: palevioletred;
24-
}
25-
.el--6 {
26-
background-color: steelblue;
27-
}
28-
.el--7 {
29-
background-color: yellow;
30-
}
31-
.el--8 {
32-
background-color: crimson;
33-
}
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Flexbox</title>
8+
<style>
9+
.el--1 {
10+
background-color: blueviolet;
11+
}
12+
.el--2 {
13+
background-color: orangered;
14+
}
15+
.el--3 {
16+
background-color: green;
17+
height: 150px;
18+
}
19+
.el--4 {
20+
background-color: goldenrod;
21+
}
22+
.el--5 {
23+
background-color: palevioletred;
24+
}
25+
.el--6 {
26+
background-color: steelblue;
27+
/* height: 250px; */
28+
}
29+
.el--7 {
30+
background-color: yellow;
31+
}
32+
.el--8 {
33+
background-color: crimson;
34+
}
3435

35-
.container {
36-
/* STARTER */
37-
font-family: sans-serif;
38-
background-color: #ddd;
39-
font-size: 40px;
40-
margin: 40px;
36+
.container {
37+
/* STARTER */
38+
font-family: sans-serif;
39+
background-color: #ddd;
40+
font-size: 34px;
41+
margin: 40px;
4142

42-
/* FLEXBOX */
43-
}
44-
</style>
45-
</head>
46-
<body>
47-
<div class="container">
48-
<div class="el el--1">HTML</div>
49-
<div class="el el--2">and</div>
50-
<div class="el el--3">CSS</div>
51-
<div class="el el--4">are</div>
52-
<div class="el el--5">amazing</div>
53-
<div class="el el--6">languages</div>
54-
<div class="el el--7">to</div>
55-
<div class="el el--8">learn</div>
56-
</div>
57-
</body>
43+
/* FLEXBOX */
44+
display: flex;
45+
align-items: center;
46+
justify-content: flex-start;
47+
gap: 50px;
48+
}
49+
50+
.el {
51+
/* margin-right: 50px; */
52+
}
53+
54+
.el--4 {
55+
align-self: flex-start;
56+
}
57+
58+
.el--1 {
59+
align-self: flex-end;
60+
}
61+
62+
.el--6 {
63+
order: -1;
64+
}
65+
66+
.el--5 {
67+
order: 2;
68+
align-self: stretch;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="container">
74+
<div class="el el--1">HTML</div>
75+
<div class="el el--2">and</div>
76+
<div class="el el--3">CSS</div>
77+
<div class="el el--4">are</div>
78+
<div class="el el--5">amazing</div>
79+
<div class="el el--6">languages</div>
80+
<!-- <div class="el el--7">to</div> -->
81+
<!-- <div class="el el--8">learn</div> -->
82+
</div>
83+
</body>
5884
</html>

0 commit comments

Comments
 (0)