Skip to content

Commit 7fdcc52

Browse files
rachelandrewrachelandrew
committed
Flexbox Basics examples
1 parent 9004729 commit 7fdcc52

File tree

10 files changed

+972
-95
lines changed

10 files changed

+972
-95
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎flexbox/basics/align-items.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox Basics: aligning items on the cross axis</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
height: 160px;
17+
background-color: #F4F7F8;
18+
border: none;
19+
border-left: 6px solid #558ABB;
20+
color: #4D4E53;
21+
width: 90%;
22+
max-width: 700px;
23+
padding: 10px 10px 0px;
24+
font-size: 100%;
25+
}
26+
27+
.playable-buttons {
28+
text-align: right;
29+
width: 90%;
30+
max-width: 700px;
31+
padding: 5px 10px 5px 26px;
32+
font-size: 100%;
33+
}
34+
35+
section {
36+
width: 90%;
37+
max-width: 700px;
38+
border: 1px solid #4D4E53;
39+
border-radius: 2px;
40+
padding: 10px 14px 10px 10px;
41+
margin-bottom: 10px;
42+
}
43+
44+
section input {
45+
display: block;
46+
margin: 5px;
47+
}
48+
49+
.box {
50+
width: 500px;
51+
height: 130px;
52+
border: 2px dotted rgb(96, 139, 168);
53+
}
54+
55+
.box>* {
56+
border: 2px solid rgb(96, 139, 168);
57+
border-radius: 5px;
58+
background-color: rgba(96, 139, 168, .2);
59+
}
60+
</style>
61+
<style class="editable">
62+
.box {
63+
display: flex;
64+
align-items: flex-start;
65+
}
66+
</style>
67+
</head>
68+
69+
<body>
70+
<section>
71+
<div class="box">
72+
<div>One</div>
73+
<div>Two</div>
74+
<div>Three
75+
<br>has
76+
<br>extra
77+
<br>text
78+
</div>
79+
</div>
80+
81+
</section>
82+
<textarea class="playable-css">
83+
.box {
84+
display: flex;
85+
align-items: flex-start;
86+
}
87+
</textarea>
88+
<textarea id="code" class="playable-html">
89+
<div class="box">
90+
<div>One</div>
91+
<div>Two</div>
92+
<div>Three
93+
<br>has
94+
<br>extra
95+
<br>text
96+
</div>
97+
</div>
98+
</textarea>
99+
<div class="playable-buttons">
100+
<input id="reset" type="button" value="Reset">
101+
</div>
102+
</body>
103+
<script>
104+
var section = document.querySelector('section');
105+
var editable = document.querySelector('.editable');
106+
var textareaHTML = document.querySelector('.playable-html');
107+
var textareaCSS = document.querySelector('.playable-css');
108+
var reset = document.getElementById('reset');
109+
var htmlCode = textareaHTML.value;
110+
var cssCode = textareaCSS.value;
111+
112+
function fillCode() {
113+
editable.innerHTML = textareaCSS.value;
114+
section.innerHTML = textareaHTML.value;
115+
}
116+
117+
reset.addEventListener('click', function () {
118+
textareaHTML.value = htmlCode;
119+
textareaCSS.value = cssCode;
120+
fillSection();
121+
});
122+
123+
textareaHTML.addEventListener('input', fillCode);
124+
textareaCSS.addEventListener('input', fillCode);
125+
window.addEventListener('load', fillCode);
126+
</script>
127+
128+
</html>

‎flexbox/basics/flex-direction.html‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox Basics: The flex-directio property</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
height: 80px;
17+
background-color: #F4F7F8;
18+
border: none;
19+
border-left: 6px solid #558ABB;
20+
color: #4D4E53;
21+
width: 90%;
22+
max-width: 700px;
23+
padding: 10px 10px 0px;
24+
font-size: 100%;
25+
}
26+
27+
.playable-buttons {
28+
text-align: right;
29+
width: 90%;
30+
max-width: 700px;
31+
padding: 5px 10px 5px 26px;
32+
font-size: 100%;
33+
}
34+
35+
section {
36+
width: 90%;
37+
max-width: 700px;
38+
border: 1px solid #4D4E53;
39+
border-radius: 2px;
40+
padding: 10px 14px 10px 10px;
41+
margin-bottom: 10px;
42+
}
43+
44+
section input {
45+
display: block;
46+
margin: 5px;
47+
}
48+
49+
50+
51+
.box>* {
52+
border: 2px solid rgb(96, 139, 168);
53+
border-radius: 5px;
54+
background-color: rgba(96, 139, 168, .2);
55+
}
56+
57+
.box {
58+
width: 500px;
59+
border: 2px dotted rgb(96, 139, 168);
60+
}
61+
</style>
62+
<style class="editable">
63+
.box {
64+
display: flex;
65+
flex-direction: row-reverse;
66+
}
67+
</style>
68+
</head>
69+
70+
<body>
71+
<section>
72+
<div class="box">
73+
<div>One</div>
74+
<div>Two</div>
75+
<div>Three</div>
76+
</div>
77+
</section>
78+
79+
<textarea class="playable-css">
80+
.box {
81+
display: flex;
82+
flex-direction: row-reverse;
83+
}
84+
</textarea>
85+
<textarea id="code" class="playable-html">
86+
<div class="box">
87+
<div>One</div>
88+
<div>Two</div>
89+
<div>Three</div>
90+
</div>
91+
</textarea>
92+
<div class="playable-buttons">
93+
<input id="reset" type="button" value="Reset">
94+
</div>
95+
</body>
96+
<script>
97+
var section = document.querySelector('section');
98+
var editable = document.querySelector('.editable');
99+
var textareaHTML = document.querySelector('.playable-html');
100+
var textareaCSS = document.querySelector('.playable-css');
101+
var reset = document.getElementById('reset');
102+
var htmlCode = textareaHTML.value;
103+
var cssCode = textareaCSS.value;
104+
105+
function fillCode() {
106+
editable.innerHTML = textareaCSS.value;
107+
section.innerHTML = textareaHTML.value;
108+
}
109+
110+
reset.addEventListener('click', function () {
111+
textareaHTML.value = htmlCode;
112+
textareaCSS.value = cssCode;
113+
fillSection();
114+
});
115+
116+
textareaHTML.addEventListener('input', fillCode);
117+
textareaCSS.addEventListener('input', fillCode);
118+
window.addEventListener('load', fillCode);
119+
</script>
120+
121+
</html>

‎flexbox/basics/flex-flow.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox Basics: flex-flow</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
height: 80px;
17+
background-color: #F4F7F8;
18+
border: none;
19+
border-left: 6px solid #558ABB;
20+
color: #4D4E53;
21+
width: 90%;
22+
max-width: 700px;
23+
padding: 10px 10px 0px;
24+
font-size: 100%;
25+
}
26+
27+
.playable-buttons {
28+
text-align: right;
29+
width: 90%;
30+
max-width: 700px;
31+
padding: 5px 10px 5px 26px;
32+
font-size: 100%;
33+
}
34+
35+
section {
36+
width: 90%;
37+
max-width: 700px;
38+
border: 1px solid #4D4E53;
39+
border-radius: 2px;
40+
padding: 10px 14px 10px 10px;
41+
margin-bottom: 10px;
42+
}
43+
44+
section input {
45+
display: block;
46+
margin: 5px;
47+
}
48+
49+
.box>* {
50+
border: 2px solid rgb(96, 139, 168);
51+
border-radius: 5px;
52+
background-color: rgba(96, 139, 168, .2);
53+
width: 200px;
54+
}
55+
56+
.box {
57+
width: 500px;
58+
border: 2px dotted rgb(96, 139, 168);
59+
}
60+
</style>
61+
<style class="editable">
62+
.box {
63+
display: flex;
64+
flex-flow: row wrap;
65+
}
66+
</style>
67+
</head>
68+
69+
<body>
70+
<section>
71+
<div class="box">
72+
<div>One</div>
73+
<div>Two</div>
74+
<div>Three</div>
75+
</div>
76+
</section>
77+
<textarea class="playable-css">
78+
.box {
79+
display: flex;
80+
flex-flow: row wrap;
81+
}
82+
</textarea>
83+
<textarea id="code" class="playable-html">
84+
<div class="box">
85+
<div>One</div>
86+
<div>Two</div>
87+
<div>Three</div>
88+
</div>
89+
</textarea>
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset">
92+
</div>
93+
</body>
94+
<script>
95+
var section = document.querySelector('section');
96+
var editable = document.querySelector('.editable');
97+
var textareaHTML = document.querySelector('.playable-html');
98+
var textareaCSS = document.querySelector('.playable-css');
99+
var reset = document.getElementById('reset');
100+
var htmlCode = textareaHTML.value;
101+
var cssCode = textareaCSS.value;
102+
103+
function fillCode() {
104+
editable.innerHTML = textareaCSS.value;
105+
section.innerHTML = textareaHTML.value;
106+
}
107+
108+
reset.addEventListener('click', function () {
109+
textareaHTML.value = htmlCode;
110+
textareaCSS.value = cssCode;
111+
fillSection();
112+
});
113+
114+
textareaHTML.addEventListener('input', fillCode);
115+
textareaCSS.addEventListener('input', fillCode);
116+
window.addEventListener('load', fillCode);
117+
</script>
118+
119+
</html>

0 commit comments

Comments
 (0)