Skip to content

Commit 2fd33b6

Browse files
mirmak4mirmak4
committed
Merge branch '04-flexbox-layout' into 04-css-grid-layout
2 parents 899eee6 + 95a9fcc commit 2fd33b6

File tree

4 files changed

+434
-306
lines changed

4 files changed

+434
-306
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- Section 4 code pens:
1414

1515
- Challenge #1: https://codepen.io/mirmak4/pen/dyQVRWe
16+
- Challenge #2: https://codepen.io/mirmak4/pen/xxQPYeZ
1617

1718
# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS"
1819

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

Lines changed: 94 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,97 @@
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-
}
34-
35-
.container {
36-
/* STARTER */
37-
font-family: sans-serif;
38-
background-color: #ddd;
39-
font-size: 40px;
40-
margin: 40px;
41-
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>
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+
}
35+
36+
.container {
37+
/* STARTER */
38+
font-family: sans-serif;
39+
background-color: #ddd;
40+
font-size: 34px;
41+
margin: 40px;
42+
43+
/* FLEXBOX */
44+
display: flex;
45+
align-items: center;
46+
justify-content: flex-start;
47+
gap: 10px;
48+
}
49+
50+
.el {
51+
/* DEFAULTS
52+
flex-grow: 0;
53+
flex-shrink: 1;
54+
flex-basis: auto;
55+
*/
56+
57+
/* flex-basis: 200px; */
58+
/* flex-shrink: 0; */
59+
/* flex: 0 0 200px; */
60+
61+
/* flex-grow: 1; */
62+
/* flex: 1 1 auto; */
63+
flex: 1;
64+
}
65+
66+
.el--4 {
67+
align-self: flex-start;
68+
/* flex-grow: 3; */
69+
}
70+
71+
.el--1 {
72+
align-self: flex-end;
73+
}
74+
75+
.el--6 {
76+
order: -1;
77+
}
78+
79+
.el--5 {
80+
order: 2;
81+
align-self: stretch;
82+
}
83+
</style>
84+
</head>
85+
<body>
86+
<div class="container">
87+
<div class="el el--1">HTML</div>
88+
<div class="el el--2">and</div>
89+
<div class="el el--3">CSS</div>
90+
<div class="el el--4">are</div>
91+
<div class="el el--5">amazing</div>
92+
<!-- <div class="el el--6">languages</div> -->
93+
<!-- <div class="el el--7">to</div> -->
94+
<!-- <div class="el el--8">learn</div> -->
95+
</div>
96+
</body>
5897
</html>

0 commit comments

Comments
 (0)