Skip to content

Commit 0bd1e1a

Browse files
MuhammadShakir-devMuhammadShakir-dev
authored
Merge pull request #1 from MuhammadShakir-dev/MuhammadShakir-dev-patch-1
💡 Let's understand Flex Direction
2 parents 3aee0cf + c0ef158 commit 0bd1e1a

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎Flex-Directions.html

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Flex-Driection</title>
6+
<!--Google Fonts Link-->
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700&display=swap"
10+
rel="stylesheet">
11+
12+
<!--Style tag-->
13+
<style>
14+
body {
15+
padding: 0%;
16+
margin: 0%;
17+
font-family: 'Work Sans';
18+
scroll-behavior: smooth;
19+
}
20+
21+
h1 {
22+
text-align: center;
23+
font-weight: 400;
24+
}
25+
26+
#container {
27+
width: 80%;
28+
height: 500px;
29+
margin: 0px auto;
30+
background-color: rgb(11, 28, 73);
31+
border: 5px solid rgb(11, 28, 73);
32+
display: flex;
33+
flex-direction: row;
34+
}
35+
36+
#container div {
37+
width: 200px;
38+
height: 200px;
39+
}
40+
41+
#container-1 {
42+
width: 80%;
43+
height: 500px;
44+
background-color: rgb(11, 28, 73);
45+
border: 5px solid rgb(11, 28, 73);
46+
margin: 0px auto;
47+
display: flex;
48+
flex-direction: row-reverse;
49+
}
50+
51+
#container-1 div {
52+
width: 200px;
53+
height: 200px;
54+
}
55+
56+
#container-2 {
57+
width: 80%;
58+
height: 500px;
59+
margin: 0px auto;
60+
background-color: rgb(11, 28, 73);
61+
border: 5px solid rgb(11, 28, 73);
62+
display: flex;
63+
flex-direction: column;
64+
65+
}
66+
67+
#container-2 div {
68+
width: 200px;
69+
height: 200px;
70+
}
71+
72+
#container-3 {
73+
width: 80%;
74+
height: 500px;
75+
margin: 0px auto;
76+
background-color: rgb(11, 28, 73);
77+
border: 5px solid rgb(11, 28, 73);
78+
display: flex;
79+
flex-direction: column-reverse;
80+
}
81+
82+
#container-3 div {
83+
width: 200px;
84+
height: 200px;
85+
}
86+
</style>
87+
88+
</head>
89+
90+
<body>
91+
<h1>Let's Understand Flexbox Directions</h1>
92+
93+
<caption>Flex Direction - Row</caption>
94+
<section id="container">
95+
<div style="background-color:#A7EDE7 ;"></div>
96+
<div style="background-color:#45CFDD;"></div>
97+
<div style="background-color:#9681EB ;"></div>
98+
<div style="background-color:#6527BE;"></div>
99+
</section>
100+
101+
<caption>Flex Direction - Row Reverse</caption>
102+
<section id="container-1">
103+
<div style="background-color:#A7EDE7 ;"></div>
104+
<div style="background-color:#45CFDD;"></div>
105+
<div style="background-color:#9681EB ;"></div>
106+
<div style="background-color:#6527BE;"></div>
107+
</section>
108+
109+
<caption>Flex Direction - Column</caption>
110+
<section id="container-2">
111+
<div style="background-color:#DAFFFB ;"></div>
112+
<div style="background-color:#64CCC5 ;"></div>
113+
<div style="background-color:#176B87 ;"></div>
114+
<div style="background-color:#001C30 ;"></div>
115+
</section>
116+
117+
<caption>Flex Direction - Column Reverse</caption>
118+
<section id="container-3">
119+
<div style="background-color:#DAFFFB ;"></div>
120+
<div style="background-color:#64CCC5 ;"></div>
121+
<div style="background-color:#176B87 ;"></div>
122+
<div style="background-color:#001C30 ;"></div>
123+
</section>
124+
125+
</body>
126+
127+
</html>

0 commit comments

Comments
 (0)