Skip to content

Commit 424bfc9

Browse files
MuhammadShakir-devMuhammadShakir-dev
authored
Merge pull request #5 from MuhammadShakir-dev/MuhammadShakir-dev-patch-5
💡 Let's understand Flex Grow, Basis and shrink.
2 parents cd15c66 + a82a0c8 commit 424bfc9

File tree

1 file changed

+120
-0
lines changed

1 file changed

+120
-0
lines changed

‎Flex-Basis,Grow,Shrink.html

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Flex-Shrink-grow-basis</title>
9+
<!--CSS Style tag-->
10+
<style>
11+
body {
12+
padding: 0%;
13+
margin: 0%;
14+
scroll-behavior: smooth;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
font-weight: 400;
20+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
21+
}
22+
23+
#container-1 {
24+
width: 80%;
25+
margin: 0px auto;
26+
background-color: darkblue;
27+
border: 5px solid darkblue;
28+
display: flex;
29+
flex-direction: row;
30+
justify-content: center;
31+
flex-wrap: wrap;
32+
}
33+
34+
#container-1 div {
35+
height: 200px;
36+
flex-basis: 350px;
37+
}
38+
39+
#container-2 {
40+
width: 80%;
41+
margin: 0px auto;
42+
background-color: darkblue;
43+
border: 5px solid darkblue;
44+
display: flex;
45+
flex-direction: column;
46+
flex-wrap: wrap;
47+
}
48+
49+
#container-2 div {
50+
width: 200px;
51+
flex-basis: 300px;
52+
}
53+
54+
#container-3 {
55+
width: 80%;
56+
margin: 0px auto;
57+
background-color: darkblue;
58+
display: flex;
59+
flex-direction: row;
60+
flex-wrap: wrap;
61+
justify-content: center;
62+
border: 5px solid darkblue;
63+
}
64+
65+
#container-3 div {
66+
width: 200px;
67+
height: 200px;
68+
}
69+
70+
#container-3 div:nth-of-type(1) {
71+
flex-grow: 2;
72+
flex-shrink: 0;
73+
}
74+
75+
#container-3 div:nth-of-type(2) {
76+
flex-grow: 1;
77+
}
78+
79+
#container-3 div:nth-of-type(4) {
80+
flex-shrink: 2;
81+
}
82+
</style>
83+
84+
</head>
85+
86+
<body>
87+
<h1>Let's play with Flex- Basis</h1>
88+
89+
<caption>Flex-Basis => Row</caption>
90+
<section id="container-1">
91+
<div style="background-color:#F4EEFF;"></div>
92+
<div style="background-color:#DCD6F7;"></div>
93+
<div style="background-color:#A6B1E1;"></div>
94+
<div style="background-color:#424874;"></div>
95+
<div style="background-color:#7F669D;"></div>
96+
</section>
97+
98+
<caption>Flex-Basis => Column</caption>
99+
<section id="container-2">
100+
<div style="background-color:#F4EEFF;"></div>
101+
<div style="background-color:#DCD6F7;"></div>
102+
<div style="background-color:#A6B1E1;"></div>
103+
<div style="background-color:#424874;"></div>
104+
<div style="background-color:#7F669D;"></div>
105+
</section>
106+
107+
<h1>Let's learn Flex-Grow</h1>
108+
109+
<caption>Flex-Grow & Shirnk => Row</caption>
110+
<section id="container-3">
111+
<div style="background-color:#F4EEFF;"></div>
112+
<div style="background-color:#DCD6F7;"></div>
113+
<div style="background-color:#A6B1E1;"></div>
114+
<div style="background-color:#424874;"></div>
115+
<div style="background-color:#7F669D;"></div>
116+
</section>
117+
118+
</body>
119+
120+
</html>

0 commit comments

Comments
 (0)