Skip to content

Commit b835da0

Browse files
rachelandrewrachelandrew
committed
alignment examples
1 parent 6bc4ea6 commit b835da0

12 files changed

+1539
-0
lines changed

‎flexbox/alignment/align-content-column.html‎

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

‎flexbox/alignment/align-content.html‎

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

0 commit comments

Comments
 (0)