Skip to content

Commit 7a2d629

Browse files
rachelandrewrachelandrew
committed
ratios along the main axis additional example
1 parent b35c993 commit 7a2d629

2 files changed

Lines changed: 130 additions & 0 deletions

File tree

‎flexbox/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ <h2>Order</h2>
5959

6060
<h2>Ratios on the main axis</h2>
6161
<ol>
62+
<li><a href="ratios/min-max-content.html">Concepts of min and max-content</a></li>
6263
<li><a href="ratios/flex-basis.html">The flex-basis property</a></li>
6364
<li><a href="ratios/flex-grow.html">The flex-grow property</a></li>
6465
<li><a href="ratios/flex-grow-ratios.html">Ratios and the flex-grow property</a></li>

‎flexbox/ratios/min-max-content.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox Ratios on the main axis: min-content and max-content</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: 240px
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+
59+
60+
61+
</style>
62+
63+
<style class="editable">
64+
.min-content {
65+
width: min-content;
66+
border: 2px dotted rgb(96, 139, 168);
67+
}
68+
.max-content {
69+
width: max-content;
70+
border: 2px dotted rgb(96, 139, 168);
71+
}
72+
73+
74+
</style>
75+
</head>
76+
77+
<body>
78+
<section>
79+
80+
<p class="min-content">I am sized with min-content and so I will take all of the soft-wrapping opportunities.</p>
81+
<p class="max-content">I am sized with max-content and so I will take none of the soft-wrapping opportunities.</p>
82+
83+
</section>
84+
<textarea class="playable-css">
85+
.min-content {
86+
width: min-content;
87+
border: 2px dotted rgb(96, 139, 168);
88+
}
89+
.max-content {
90+
width: max-content;
91+
border: 2px dotted rgb(96, 139, 168);
92+
}
93+
</textarea>
94+
<textarea id="code" class="playable-html">
95+
96+
<p class="min-content">I am sized with min-content and so I will take all of the soft-wrapping opportunities.</p>
97+
<p class="max-content">I am sized with max-content and so I will take none of the soft-wrapping opportunities.</p>
98+
99+
</textarea>
100+
<div class="playable-buttons">
101+
<input id="reset" type="button" value="Reset">
102+
</div>
103+
</body>
104+
<script>
105+
var section = document.querySelector('section');
106+
var editable = document.querySelector('.editable');
107+
var textareaHTML = document.querySelector('.playable-html');
108+
var textareaCSS = document.querySelector('.playable-css');
109+
var reset = document.getElementById('reset');
110+
var htmlCode = textareaHTML.value;
111+
var cssCode = textareaCSS.value;
112+
113+
function fillCode() {
114+
editable.innerHTML = textareaCSS.value;
115+
section.innerHTML = textareaHTML.value;
116+
}
117+
118+
reset.addEventListener('click', function () {
119+
textareaHTML.value = htmlCode;
120+
textareaCSS.value = cssCode;
121+
fillCode();
122+
});
123+
124+
textareaHTML.addEventListener('input', fillCode);
125+
textareaCSS.addEventListener('input', fillCode);
126+
window.addEventListener('load', fillCode);
127+
</script>
128+
129+
</html>

0 commit comments

Comments
 (0)