Skip to content

Commit 9dd0f24

Browse files
rachelandrewrachelandrew
committed
files for the article on Flexbox Order
1 parent 639da31 commit 9dd0f24

File tree

5 files changed

+603
-0
lines changed

5 files changed

+603
-0
lines changed

‎flexbox/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,14 @@ <h2>Alignment</h2>
4747
<li><a href="alignment/justify-content-reverse.html">Main axis alignment with reversed row</a></li>
4848
<li><a href="alignment/auto-margins.html">Alignment with auto margins</a></li>
4949
</ol>
50+
51+
<h2>Order</h2>
52+
53+
<ol>
54+
<li><a href="order/flex-direction.html">The flex-direction property</a></li>
55+
<li><a href="order/order.html">The order property</a></li>
56+
<li><a href="order/negative-order.html">Using negative values for order</a></li>
57+
<li><a href="order/usecase-order.html">A usecase for the order property</a></li>
58+
</ol>
5059
</body>
5160
</html>

‎flexbox/order/flex-direction.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Order: The flex-direction 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+
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: 90px
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 solid rgb(96, 139, 168);
60+
border-radius: 5px;
61+
background-color: rgba(96, 139, 168, .2);
62+
padding: 10px;
63+
}
64+
65+
.box>* a:focus {
66+
background-color: yellow;
67+
color: black;
68+
}
69+
70+
.box {
71+
width: 500px;
72+
border: 2px dotted rgb(96, 139, 168);
73+
}
74+
75+
76+
</style>
77+
<style class="editable">
78+
.box {
79+
display: flex;
80+
flex-direction: row-reverse;
81+
}
82+
</style>
83+
</head>
84+
85+
<body>
86+
<section>
87+
<div class="box">
88+
<div><a href="#">One</a></div>
89+
<div><a href="#">Two</a></div>
90+
<div><a href="#">Three</a></div>
91+
</div>
92+
</section>
93+
94+
<textarea class="playable-css">
95+
.box {
96+
display: flex;
97+
flex-direction: row-reverse;
98+
}
99+
</textarea>
100+
<textarea id="code" class="playable-html">
101+
<div class="box">
102+
<div><a href="#">One</a></div>
103+
<div><a href="#">Two</a></div>
104+
<div><a href="#">Three</a></div>
105+
</div>
106+
</textarea>
107+
<div class="playable-buttons">
108+
<input id="reset" type="button" value="Reset">
109+
</div>
110+
</body>
111+
<script>
112+
var section = document.querySelector('section');
113+
var editable = document.querySelector('.editable');
114+
var textareaHTML = document.querySelector('.playable-html');
115+
var textareaCSS = document.querySelector('.playable-css');
116+
var reset = document.getElementById('reset');
117+
var htmlCode = textareaHTML.value;
118+
var cssCode = textareaCSS.value;
119+
120+
function fillCode() {
121+
editable.innerHTML = textareaCSS.value;
122+
section.innerHTML = textareaHTML.value;
123+
}
124+
125+
reset.addEventListener('click', function () {
126+
textareaHTML.value = htmlCode;
127+
textareaCSS.value = cssCode;
128+
fillCode();
129+
});
130+
131+
textareaHTML.addEventListener('input', fillCode);
132+
textareaCSS.addEventListener('input', fillCode);
133+
window.addEventListener('load', fillCode);
134+
</script>
135+
136+
</html>

‎flexbox/order/negative-order.html‎

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

0 commit comments

Comments
 (0)