Skip to content

Commit 24d2fc0

Browse files
rachelandrewrachelandrew
committed
wrapping examples
1 parent c8b4589 commit 24d2fc0

9 files changed

+1240
-0
lines changed

‎flexbox/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,17 @@ <h2>Ratios on the main axis</h2>
6767
<li><a href="ratios/flex-shrink-min-content.html">min-content sizing and the flex-shrink property</a></li>
6868
<li><a href="ratios/flex-shrink-ratios.html">Ratios and the flex-shrink property</a></li>
6969
</ol>
70+
71+
<h2>Mastering wrapping of flex items</h2>
72+
<ol>
73+
<li><a href="wrapping/row-wrap.html">Wrapping when flex-direction is row</a></li>
74+
<li><a href="wrapping/column-wrap.html">Wrapping when flex-direction is column</a></li>
75+
<li><a href="wrapping/row-reverse-wrap.html">Wrapping when flex-direction is row-reverse</a></li>
76+
<li><a href="wrapping/grid-example.html">Grid and two-dimensions</a></li>
77+
<li><a href="wrapping/flex-grid.html">A flexbox grid</a></li>
78+
<li><a href="wrapping/gaps.html">Gaps between flex items</a></li>
79+
<li><a href="wrapping/visibility-collapse.html">Setting an item to visibility: collapse</a></li>
80+
<li><a href="wrapping/wrapped-visibility-collapse.html">Wrapped items with visibility: collapse</a></li>
81+
</ol>
7082
</body>
7183
</html>

‎flexbox/wrapping/column-wrap.html

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox wrapping: Wrapping when flex-direction is 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: 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+
}
63+
64+
.box {
65+
66+
border: 2px dotted rgb(96, 139, 168);
67+
}
68+
</style>
69+
70+
<style class="editable">
71+
.box {
72+
height: 300px;
73+
display: flex;
74+
flex-direction: column;
75+
flex-wrap: wrap;
76+
}
77+
.box>* {
78+
flex: 1 1 80px;
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>Nine</div>
95+
<div>Ten</div>
96+
</div>
97+
</section>
98+
<textarea class="playable-css">
99+
.box {
100+
height: 300px;
101+
display: flex;
102+
flex-direction: column;
103+
flex-wrap: wrap;
104+
}
105+
.box>* {
106+
flex: 1 1 80px;
107+
}
108+
</textarea>
109+
<textarea id="code" class="playable-html">
110+
<div class="box">
111+
<div>One</div>
112+
<div>Two</div>
113+
<div>Three</div>
114+
<div>Four</div>
115+
<div>Five</div>
116+
<div>Six</div>
117+
<div>Seven</div>
118+
<div>Eight</div>
119+
<div>Nine</div>
120+
<div>Ten</div>
121+
</div>
122+
</textarea>
123+
<div class="playable-buttons">
124+
<input id="reset" type="button" value="Reset">
125+
</div>
126+
</body>
127+
<script>
128+
var section = document.querySelector('section');
129+
var editable = document.querySelector('.editable');
130+
var textareaHTML = document.querySelector('.playable-html');
131+
var textareaCSS = document.querySelector('.playable-css');
132+
var reset = document.getElementById('reset');
133+
var htmlCode = textareaHTML.value;
134+
var cssCode = textareaCSS.value;
135+
136+
function fillCode() {
137+
editable.innerHTML = textareaCSS.value;
138+
section.innerHTML = textareaHTML.value;
139+
}
140+
141+
reset.addEventListener('click', function () {
142+
textareaHTML.value = htmlCode;
143+
textareaCSS.value = cssCode;
144+
fillCode();
145+
});
146+
147+
textareaHTML.addEventListener('input', fillCode);
148+
textareaCSS.addEventListener('input', fillCode);
149+
window.addEventListener('load', fillCode);
150+
</script>
151+
152+
</html>

‎flexbox/wrapping/flex-grid.html

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox wrapping: A flexbox grid</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+
}
64+
65+
.box {
66+
67+
border: 2px dotted rgb(96, 139, 168);
68+
}
69+
</style>
70+
71+
<style class="editable">
72+
.box {
73+
width: 600px;
74+
display: flex;
75+
flex-wrap: wrap;
76+
}
77+
.box>* {
78+
flex: 0 0 33.3333%;
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>Nine</div>
96+
<div>Ten</div>
97+
</div>
98+
</section>
99+
<textarea class="playable-css">
100+
.box {
101+
width: 600px;
102+
display: flex;
103+
flex-wrap: wrap;
104+
}
105+
.box>* {
106+
flex: 0 0 33.3333%;
107+
}
108+
109+
</textarea>
110+
<textarea id="code" class="playable-html">
111+
<div class="box">
112+
<div>One</div>
113+
<div>Two</div>
114+
<div>Three</div>
115+
<div>Four</div>
116+
<div>Five</div>
117+
<div>Six</div>
118+
<div>Seven</div>
119+
<div>Eight</div>
120+
<div>Nine</div>
121+
<div>Ten</div>
122+
</div>
123+
</textarea>
124+
<div class="playable-buttons">
125+
<input id="reset" type="button" value="Reset">
126+
</div>
127+
</body>
128+
<script>
129+
var section = document.querySelector('section');
130+
var editable = document.querySelector('.editable');
131+
var textareaHTML = document.querySelector('.playable-html');
132+
var textareaCSS = document.querySelector('.playable-css');
133+
var reset = document.getElementById('reset');
134+
var htmlCode = textareaHTML.value;
135+
var cssCode = textareaCSS.value;
136+
137+
function fillCode() {
138+
editable.innerHTML = textareaCSS.value;
139+
section.innerHTML = textareaHTML.value;
140+
}
141+
142+
reset.addEventListener('click', function () {
143+
textareaHTML.value = htmlCode;
144+
textareaCSS.value = cssCode;
145+
fillCode();
146+
});
147+
148+
textareaHTML.addEventListener('input', fillCode);
149+
textareaCSS.addEventListener('input', fillCode);
150+
window.addEventListener('load', fillCode);
151+
</script>
152+
153+
</html>

0 commit comments

Comments
 (0)