Skip to content

Commit cd15c66

Browse files
MuhammadShakir-devMuhammadShakir-dev
authored
Merge pull request #4 from MuhammadShakir-dev/MuhammadShakir-dev-patch-4
💡 Let's understand Align Content and Align Self
2 parents 67db18b + d3a9586 commit cd15c66

File tree

1 file changed

+307
-0
lines changed

1 file changed

+307
-0
lines changed

‎Align-Content&Self.html

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

0 commit comments

Comments
 (0)