Skip to content

Commit 67db18b

Browse files
MuhammadShakir-devMuhammadShakir-dev
authored
Merge pull request #3 from MuhammadShakir-dev/MuhammadShakir-dev-patch-3
💡 Let's understand Flex-Wrap
2 parents 32cb446 + 449a64a commit 67db18b

File tree

1 file changed

+286
-0
lines changed

1 file changed

+286
-0
lines changed

‎Flex-Wrap/Flex-Wrap.html

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Flex Wrap</title>
5+
<!--Style tag-->
6+
<style>
7+
body {
8+
padding: 0%;
9+
margin: 0%;
10+
font-family: 'Work Sans';
11+
scroll-behavior: smooth;
12+
}
13+
14+
h1 {
15+
text-align: center;
16+
font-weight: 400;
17+
}
18+
19+
#container {
20+
width: 80%;
21+
height: 400px;
22+
margin: 0px auto;
23+
background-color: rgb(11, 28, 73);
24+
border: 5px solid rgb(11, 28, 73);
25+
display: flex;
26+
flex-direction: row;
27+
justify-content: flex-start;
28+
flex-wrap: wrap;
29+
}
30+
31+
#container div {
32+
width: 500px;
33+
height: 200px;
34+
}
35+
36+
#container-1 {
37+
width: 80%;
38+
height: 400px;
39+
background-color: rgb(11, 28, 73);
40+
border: 5px solid rgb(11, 28, 73);
41+
margin: 0px auto;
42+
display: flex;
43+
flex-direction: row;
44+
justify-content: flex-end;
45+
flex-wrap: wrap-reverse;
46+
}
47+
48+
#container-1 div {
49+
width: 500px;
50+
height: 200px;
51+
}
52+
53+
#container-2 {
54+
width: 80%;
55+
height: 400px;
56+
margin: 0px auto;
57+
background-color: rgb(11, 28, 73);
58+
border: 5px solid rgb(11, 28, 73);
59+
display: flex;
60+
flex-direction: row;
61+
justify-content: space-around;
62+
flex-wrap: wrap;
63+
}
64+
65+
#container-2 div {
66+
width: 500px;
67+
height: 200px;
68+
}
69+
70+
#container-3 {
71+
width: 80%;
72+
height: 400px;
73+
margin: 0px auto;
74+
background-color: rgb(11, 28, 73);
75+
border: 5px solid rgb(11, 28, 73);
76+
display: flex;
77+
flex-direction: row;
78+
justify-content: space-between;
79+
flex-wrap: wrap-reverse;
80+
}
81+
82+
#container-3 div {
83+
width: 500px;
84+
height: 200px;
85+
}
86+
87+
#container-4 {
88+
width: 80%;
89+
height: 500px;
90+
margin: 0px auto;
91+
background-color: rgb(11, 28, 73);
92+
border: 5px solid rgb(11, 28, 73);
93+
display: flex;
94+
flex-direction: row;
95+
justify-content: space-evenly;
96+
flex-wrap: wrap;
97+
}
98+
99+
#container-4 div {
100+
width: 400px;
101+
height: 200px;
102+
}
103+
104+
105+
#container-5 {
106+
width: 90%;
107+
height: 400px;
108+
margin: 0px auto;
109+
border: 5px solid rgb(11, 28, 73);
110+
background-color: rgb(11, 28, 73);
111+
display: flex;
112+
flex-direction: column;
113+
justify-content: flex-start;
114+
flex-wrap: wrap;
115+
}
116+
117+
#container-5 div {
118+
width: 200px;
119+
height: 200px;
120+
}
121+
122+
#container-6 {
123+
width: 90%;
124+
height: 400px;
125+
margin: 0px auto;
126+
border: 5px solid rgb(11, 28, 73);
127+
background-color: rgb(11, 28, 73);
128+
display: flex;
129+
flex-direction: column;
130+
justify-content: flex-end;
131+
flex-wrap: wrap-reverse;
132+
}
133+
134+
#container-6 div {
135+
width: 200px;
136+
height: 200px;
137+
}
138+
139+
#container-7 {
140+
width: 90%;
141+
height: 400px;
142+
margin: 0px auto;
143+
border: 5px solid rgb(11, 28, 73);
144+
background-color: rgb(11, 28, 73);
145+
display: flex;
146+
flex-direction: column;
147+
justify-content: space-around;
148+
flex-wrap: wrap;
149+
}
150+
151+
#container-7 div {
152+
width: 200px;
153+
height: 200px;
154+
}
155+
156+
#container-8 {
157+
width: 90%;
158+
height: 400px;
159+
margin: 0px auto;
160+
border: 5px solid rgb(11, 28, 73);
161+
background-color: rgb(11, 28, 73);
162+
display: flex;
163+
flex-direction: column;
164+
justify-content: space-between;
165+
flex-wrap: wrap-reverse;
166+
}
167+
168+
#container-8 div {
169+
width: 200px;
170+
height: 200px;
171+
}
172+
173+
#container-9 {
174+
width: 90%;
175+
height: 400px;
176+
margin: 0px auto;
177+
border: 5px solid rgb(11, 28, 73);
178+
background-color: rgb(11, 28, 73);
179+
display: flex;
180+
flex-direction: column;
181+
justify-content: space-evenly;
182+
flex-wrap: wrap;
183+
}
184+
185+
#container-9 div {
186+
width: 200px;
187+
height: 200px;
188+
}
189+
</style>
190+
191+
</head>
192+
<body>
193+
194+
<!--Flex Wrap and Reverse Wrape row vise which is the main axis-->
195+
196+
<h1>Let's Understand Flex-Wrap[Row-vise]</h1>
197+
198+
<caption> Flex-wrap - Flex-start[Wrap]</caption>
199+
<section id="container">
200+
<div style="background-color:#A7EDE7 ;"></div>
201+
<div style="background-color:#45CFDD;"></div>
202+
<div style="background-color:#9681EB ;"></div>
203+
<div style="background-color:#6527BE;"></div>
204+
</section>
205+
206+
<caption> Flex-wrap - Flex-end[Wrap-reverse]</caption>
207+
<section id="container-1">
208+
<div style="background-color:#A7EDE7 ;"></div>
209+
<div style="background-color:#45CFDD;"></div>
210+
<div style="background-color:#9681EB ;"></div>
211+
<div style="background-color:#6527BE;"></div>
212+
</section>
213+
214+
<caption> Flex-wrap- Space-around[Wrap]</caption>
215+
<section id="container-2">
216+
<div style="background-color:#DAFFFB ;"></div>
217+
<div style="background-color:#64CCC5 ;"></div>
218+
<div style="background-color:#176B87 ;"></div>
219+
<div style="background-color:#001C30 ;"></div>
220+
</section>
221+
222+
<caption> Flex-wrap - Space-between[Wrap-reverse]</caption>
223+
<section id="container-3">
224+
<div style="background-color:#DAFFFB ;"></div>
225+
<div style="background-color:#64CCC5 ;"></div>
226+
<div style="background-color:#176B87 ;"></div>
227+
<div style="background-color:#001C30 ;"></div>
228+
</section>
229+
230+
<caption> Flex-wrap - Space-evenly[Wrap]</caption>
231+
<section id="container-4">
232+
<div style="background-color:#F4EEFF ;"></div>
233+
<div style="background-color:#DCD6F7 ;"></div>
234+
<div style="background-color:#A6B1E1 ;"></div>
235+
<div style="background-color:#424874 ;"></div>
236+
</section>
237+
238+
<!--Flex wrap and reverse wrap column vise which is the cross axis-->
239+
<h1>Let's Understand FLex-wrap[Column-vise]</h1>
240+
241+
<caption> Flex-wrap- Flex-start[Wrap]</caption>
242+
<section id="container-5">
243+
<div style="background-color:#A7EDE7 ;"></div>
244+
<div style="background-color:#45CFDD;"></div>
245+
<div style="background-color:#9681EB ;"></div>
246+
<div style="background-color:#6527BE;"></div>
247+
<div style="background-color:#DAFFFB ;"></div>
248+
</section>
249+
250+
<caption> Flex-wrap- Flex-end[Wrap-reverse]</caption>
251+
<section id="container-6">
252+
<div style="background-color:#A7EDE7 ;"></div>
253+
<div style="background-color:#45CFDD;"></div>
254+
<div style="background-color:#9681EB ;"></div>
255+
<div style="background-color:#6527BE;"></div>
256+
<div style="background-color:#DAFFFB ;"></div>
257+
</section>
258+
259+
<caption> Flex-Wrap- Space-around[Wrap]</caption>
260+
<section id="container-7">
261+
<div style="background-color:#DAFFFB ;"></div>
262+
<div style="background-color:#64CCC5 ;"></div>
263+
<div style="background-color:#176B87 ;"></div>
264+
<div style="background-color:#001C30 ;"></div>
265+
<div style="background-color:#DAFFFB ;"></div>
266+
</section>
267+
268+
<caption> Flex-wrap- Space-between[Wrap-reverse]</caption>
269+
<section id="container-8">
270+
<div style="background-color:#DAFFFB ;"></div>
271+
<div style="background-color:#64CCC5 ;"></div>
272+
<div style="background-color:#176B87 ;"></div>
273+
<div style="background-color:#001C30 ;"></div>
274+
<div style="background-color:#DAFFFB ;"></div>
275+
</section>
276+
277+
<caption> Flex-wrap- Space-evenly[Wrap]</caption>
278+
<section id="container-9">
279+
<div style="background-color:#F4EEFF ;"></div>
280+
<div style="background-color:#DCD6F7 ;"></div>
281+
<div style="background-color:#A6B1E1 ;"></div>
282+
<div style="background-color:#424874 ;"></div>
283+
<div style="background-color:#DAFFFB ;"></div>
284+
</section>
285+
</body>
286+
</html>

0 commit comments

Comments
 (0)