Skip to content

Commit 8f18846

Browse files
MuhammadShakir-devMuhammadShakir-dev
authored
💡 Let's understand Justify Content
1 parent 0bd1e1a commit 8f18846

File tree

1 file changed

+271
-0
lines changed

1 file changed

+271
-0
lines changed

‎Justify-Content.html

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

0 commit comments

Comments
 (0)