Skip to content

Commit cff41ac

Browse files
rachelandrewrachelandrew
committed
use cases of flexbox examples
1 parent f875c1b commit cff41ac

File tree

10 files changed

+1337
-0
lines changed

10 files changed

+1337
-0
lines changed

‎flexbox/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,18 @@ <h2>Mastering wrapping of flex items</h2>
7979
<li><a href="wrapping/visibility-collapse.html">Setting an item to visibility: collapse</a></li>
8080
<li><a href="wrapping/wrapped-visibility-collapse.html">Wrapped items with visibility: collapse</a></li>
8181
</ol>
82+
83+
<h2>Common Use Cases of Flexbox</h2>
84+
<ol>
85+
<li><a href="use-cases/navigation.html">Navigation</a></li>
86+
<li><a href="use-cases/navigation-flex.html">Navigation distributing space to items</a></li>
87+
<li><a href="use-cases/navigation-split.html">Split navigation</a></li>
88+
<li><a href="use-cases/center.html">Centering an item</a></li>
89+
<li><a href="use-cases/cards.html">Card layout</a></li>
90+
<li><a href="use-cases/media.html">Media object</a></li>
91+
<li><a href="use-cases/media-flipped.html">Flipped media object</a></li>
92+
<li><a href="use-cases/input-button.html">Input element and button</a></li>
93+
<li><a href="use-cases/label-input-button.html">Adding a label to the input and button</a></li>
94+
</ol>
8295
</body>
8396
</html>

‎flexbox/use-cases/cards.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Use cases: laying out a card</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: 170px
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 80px
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+
.cards {
59+
display: grid;
60+
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
61+
grid-gap: 10px;
62+
}
63+
64+
.card {
65+
border: 2px solid rgb(96, 139, 168);
66+
border-radius: 5px;
67+
68+
}
69+
70+
.card .content {
71+
padding: 10px;
72+
}
73+
74+
.card footer {
75+
background-color: rgba(96, 139, 168, .2);
76+
padding: 10px;
77+
}
78+
</style>
79+
<style class="editable">
80+
.card {
81+
display: flex;
82+
flex-direction: column;
83+
}
84+
85+
.card .content {
86+
flex: 1 1 auto;
87+
}
88+
</style>
89+
</head>
90+
91+
<body>
92+
<section>
93+
<div class="cards">
94+
<div class="card">
95+
<div class="content">
96+
<p>This card doesn't have much content.</p>
97+
</div>
98+
<footer>Card footer</footer>
99+
</div>
100+
<div class="card">
101+
<div class="content">
102+
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
103+
</div>
104+
<footer>Card footer</footer>
105+
</div>
106+
</div>
107+
108+
</section>
109+
<textarea class="playable-css">
110+
.card {
111+
display: flex;
112+
flex-direction: column;
113+
}
114+
115+
.card .content {
116+
flex: 1 1 auto;
117+
}
118+
</textarea>
119+
<textarea id="code" class="playable-html">
120+
<div class="cards">
121+
<div class="card">
122+
<div class="content">
123+
<p>This card doesn't have much content.</p>
124+
</div>
125+
<footer>Card footer</footer>
126+
</div>
127+
<div class="card">
128+
<div class="content">
129+
<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
130+
</div>
131+
<footer>Card footer</footer>
132+
</div>
133+
</div>
134+
</textarea>
135+
<div class="playable-buttons">
136+
<input id="reset" type="button" value="Reset">
137+
</div>
138+
</body>
139+
<script>
140+
var section = document.querySelector('section');
141+
var editable = document.querySelector('.editable');
142+
var textareaHTML = document.querySelector('.playable-html');
143+
var textareaCSS = document.querySelector('.playable-css');
144+
var reset = document.getElementById('reset');
145+
var htmlCode = textareaHTML.value;
146+
var cssCode = textareaCSS.value;
147+
148+
function fillCode() {
149+
editable.innerHTML = textareaCSS.value;
150+
section.innerHTML = textareaHTML.value;
151+
}
152+
153+
reset.addEventListener('click', function () {
154+
textareaHTML.value = htmlCode;
155+
textareaCSS.value = cssCode;
156+
fillCode();
157+
});
158+
159+
textareaHTML.addEventListener('input', fillCode);
160+
textareaCSS.addEventListener('input', fillCode);
161+
window.addEventListener('load', fillCode);
162+
</script>
163+
164+
</html>

‎flexbox/use-cases/center.html‎

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

0 commit comments

Comments
 (0)