Skip to content

Commit f067f41

Browse files
rvsprvsp
committed
flex box example
1 parent b3ee4ee commit f067f41

File tree

3 files changed

+151
-1
lines changed

3 files changed

+151
-1
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
ref.css
2-
sample.html
2+
sample.html
3+
.vscode

‎flex-box-example/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Flex Box - Example</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="row">
14+
<div class="col-12">
15+
<div class="box">12</div>
16+
</div>
17+
</div>
18+
19+
<div class="row">
20+
<div class="col-6">
21+
<div class="box">6</div>
22+
</div>
23+
<div class="col-6">
24+
<div class="box">6</div>
25+
</div>
26+
</div>
27+
28+
<div class="row">
29+
<div class="col-4">
30+
<div class="box">4</div>
31+
</div>
32+
<div class="col-4">
33+
<div class="box">4</div>
34+
</div>
35+
<div class="col-4">
36+
<div class="box">4</div>
37+
</div>
38+
</div>
39+
40+
<div class="row">
41+
<div class="col-1">
42+
<div class="box">1</div>
43+
</div>
44+
<div class="col-1">
45+
<div class="box">1</div>
46+
</div>
47+
<div class="col-1">
48+
<div class="box">1</div>
49+
</div>
50+
<div class="col-1">
51+
<div class="box">1</div>
52+
</div>
53+
<div class="col-1">
54+
<div class="box">1</div>
55+
</div>
56+
<div class="col-1">
57+
<div class="box">1</div>
58+
</div>
59+
<div class="col-1">
60+
<div class="box">1</div>
61+
</div>
62+
<div class="col-1">
63+
<div class="box">1</div>
64+
</div>
65+
<div class="col-1">
66+
<div class="box">1</div>
67+
</div>
68+
<div class="col-1">
69+
<div class="box">1</div>
70+
</div>
71+
<div class="col-1">
72+
<div class="box">1</div>
73+
</div>
74+
<div class="col-1">
75+
<div class="box">1</div>
76+
</div>
77+
</div>
78+
79+
</div>
80+
</body>
81+
82+
</html>

‎flex-box-example/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
padding: 0;
6+
margin: 0;
7+
}
8+
9+
html,
10+
body {
11+
width: 100vw;
12+
height: 100vh;
13+
}
14+
15+
.container {
16+
height: auto;
17+
padding: 2% 10%;
18+
}
19+
20+
.box {
21+
position: relative;
22+
box-sizing: border-box;
23+
min-height: 1rem;
24+
margin: 2px;
25+
background: #4788c9;
26+
border-radius: 2px;
27+
overflow: hidden;
28+
text-align: center;
29+
color: #fff;
30+
padding: 20px 0;
31+
border: 2px dashed black;
32+
}
33+
34+
.row {
35+
display: flex;
36+
width: 100%;
37+
flex-flow: row;
38+
flex-direction: row;
39+
flex-wrap: wrap;
40+
justify-content: space-around;
41+
box-sizing: border-box;
42+
}
43+
44+
.col-12 {
45+
flex-basis: 100%;
46+
max-width: 100%;
47+
}
48+
49+
.col-6 {
50+
flex-basis: 50%;
51+
max-width: 50%;
52+
}
53+
54+
.col-4 {
55+
flex-basis: 33%;
56+
max-width: 33%;
57+
}
58+
59+
.col-4 {
60+
flex-basis: 33%;
61+
max-width: 33%;
62+
}
63+
64+
.col-1 {
65+
flex-basis: 8.33%;
66+
max-width: 8.33%;
67+
}

0 commit comments

Comments
 (0)