Skip to content

Commit 82a525c

Browse files
CodeWithHarryCodeWithHarry
committed
Video 38 Completed
1 parent c320de8 commit 82a525c

File tree

2 files changed

+76
-0
lines changed

2 files changed

+76
-0
lines changed

‎Video 38/flexbox.drawio.pdf

24.6 KB
Binary file not shown.

‎Video 38/index.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Flexbox</title>
8+
<style>
9+
.container {
10+
border: 2px solid red;
11+
display: flex;
12+
height: 80vh;
13+
/* justify-content: center; */
14+
align-items: center;
15+
/* flex-direction: column; */
16+
flex-wrap: wrap;
17+
/* align-content: flex-start; */
18+
/* there is no justify-items in flexbox; */
19+
flex-flow: row wrap;
20+
/* gap: 30px;
21+
row-gap: 40px;
22+
column-gap: 10px; */
23+
gap: 40px 10px;
24+
25+
}
26+
27+
.item {
28+
/* flex-grow: 1; */
29+
height: 92px;
30+
width: 92px;
31+
border: 2px solid black;
32+
/* margin: 4px; */
33+
background-color: blueviolet;
34+
}
35+
36+
.order-1{
37+
order: 1;
38+
}
39+
.order-2{
40+
order: 2;
41+
}
42+
.order-3{
43+
order: 3;
44+
}
45+
46+
.item1{
47+
/* flex-grow: 2; */
48+
/* flex-shrink: 2; */
49+
align-self: flex-end;
50+
}
51+
</style>
52+
</head>
53+
54+
<body>
55+
56+
<main>
57+
<div class="container">
58+
<div class="item item1">1</div>
59+
<div class="item">2</div>
60+
<div class="item">3</div>
61+
<div class="item order-1">4</div>
62+
<div class="item"></div>
63+
<div class="item"></div>
64+
<div class="item"></div>
65+
<div class="item"></div>
66+
<div class="item"></div>
67+
<div class="item"></div>
68+
<div class="item"></div>
69+
70+
71+
</div>
72+
</main>
73+
74+
</body>
75+
76+
</html>

0 commit comments

Comments
 (0)