Skip to content

Commit d800142

Browse files
chrisdavidmillschrisdavidmills
committed
fixing sizing on flex use case examples
1 parent fd672ba commit d800142

File tree

6 files changed

+63
-65
lines changed

6 files changed

+63
-65
lines changed

‎flexbox/use-cases/cards.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
}
2727

2828
textarea:nth-of-type(1) {
29-
height: 170px
29+
height: 140px
3030
}
3131

3232
textarea:nth-of-type(2) {
33-
height: 80px
33+
height: 250px
3434
}
3535

3636
.playable-buttons {
@@ -64,7 +64,7 @@
6464
.card {
6565
border: 2px solid rgb(96, 139, 168);
6666
border-radius: 5px;
67-
67+
6868
}
6969

7070
.card .content {
@@ -111,7 +111,7 @@
111111
display: flex;
112112
flex-direction: column;
113113
}
114-
114+
115115
.card .content {
116116
flex: 1 1 auto;
117117
}

‎flexbox/use-cases/media-flipped.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
}
2727

2828
textarea:nth-of-type(1) {
29-
height: 170px
29+
height: 180px
3030
}
3131

3232
textarea:nth-of-type(2) {
33-
height: 80px
33+
height: 120px
3434
}
3535

3636
.playable-buttons {
@@ -73,7 +73,7 @@
7373
}
7474

7575

76-
76+
7777
</style>
7878
<style class="editable">
7979
.media {

‎flexbox/use-cases/media.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
}
2727

2828
textarea:nth-of-type(1) {
29-
height: 170px
29+
height: 160px
3030
}
3131

3232
textarea:nth-of-type(2) {
33-
height: 80px
33+
height: 100px
3434
}
3535

3636
.playable-buttons {
@@ -68,7 +68,7 @@
6868
margin: 0 10px 0 0;
6969
}
7070

71-
71+
7272
</style>
7373
<style class="editable">
7474
.media {

‎flexbox/use-cases/navigation-flex.html‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 80px
30+
height: 140px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 160px
34+
height: 140px
3535
}
3636

3737
.playable-buttons {
@@ -74,7 +74,7 @@
7474
padding: 10px;
7575
display: block;
7676
}
77-
77+
7878
</style>
7979
<style class="editable">
8080
nav ul {
@@ -101,24 +101,23 @@
101101

102102
</section>
103103
<textarea class="playable-css">
104-
nav ul {
105-
display: flex;
106-
}
107-
108-
nav li {
109-
flex: auto ;
110-
}
104+
nav ul {
105+
display: flex;
106+
}
111107

108+
nav li {
109+
flex: auto ;
110+
}
112111
</textarea>
113112
<textarea id="code" class="playable-html">
114-
<nav>
115-
<ul>
116-
<li><a href="#">Page 1</a></li>
117-
<li><a href="#">Page 2</a></li>
118-
<li><a href="#">Page 3 is longer</a></li>
119-
<li><a href="#">Page 4</a></li>
120-
</ul>
121-
</nav>
113+
<nav>
114+
<ul>
115+
<li><a href="#">Page 1</a></li>
116+
<li><a href="#">Page 2</a></li>
117+
<li><a href="#">Page 3 is longer</a></li>
118+
<li><a href="#">Page 4</a></li>
119+
</ul>
120+
</nav>
122121
</textarea>
123122
<div class="playable-buttons">
124123
<input id="reset" type="button" value="Reset">

‎flexbox/use-cases/navigation.html‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 80px
30+
height: 100px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 160px
34+
height: 140px
3535
}
3636

3737
.playable-buttons {
@@ -74,7 +74,7 @@
7474
padding: 10px;
7575
display: block;
7676
}
77-
77+
7878
</style>
7979
<style class="editable">
8080
nav ul {
@@ -98,21 +98,20 @@
9898

9999
</section>
100100
<textarea class="playable-css">
101-
nav ul {
102-
display: flex;
103-
justify-content: space-between;
104-
}
105-
101+
nav ul {
102+
display: flex;
103+
justify-content: space-between;
104+
}
106105
</textarea>
107106
<textarea id="code" class="playable-html">
108-
<nav>
109-
<ul>
110-
<li><a href="#">Page 1</a></li>
111-
<li><a href="#">Page 2</a></li>
112-
<li><a href="#">Page 3 is longer</a></li>
113-
<li><a href="#">Page 4</a></li>
114-
</ul>
115-
</nav>
107+
<nav>
108+
<ul>
109+
<li><a href="#">Page 1</a></li>
110+
<li><a href="#">Page 2</a></li>
111+
<li><a href="#">Page 3 is longer</a></li>
112+
<li><a href="#">Page 4</a></li>
113+
</ul>
114+
</nav>
116115
</textarea>
117116
<div class="playable-buttons">
118117
<input id="reset" type="button" value="Reset">

‎flexbox/use-cases/split-navigation.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
}
2828

2929
textarea:nth-of-type(1) {
30-
height: 80px
30+
height: 160px
3131
}
3232

3333
textarea:nth-of-type(2) {
34-
height: 160px
34+
height: 140px
3535
}
3636

3737
.playable-buttons {
@@ -74,7 +74,7 @@
7474
padding: 10px;
7575
display: block;
7676
}
77-
77+
7878
</style>
7979
<style class="editable">
8080
nav ul {
@@ -104,26 +104,26 @@
104104

105105
</section>
106106
<textarea class="playable-css">
107-
nav ul {
108-
display: flex;
109-
margin: 0 -10px;
110-
}
111-
nav li {
112-
margin: 0 10px;
113-
}
114-
.push-right {
115-
margin-left: auto;
116-
}
107+
nav ul {
108+
display: flex;
109+
margin: 0 -10px;
110+
}
111+
nav li {
112+
margin: 0 10px;
113+
}
114+
.push-right {
115+
margin-left: auto;
116+
}
117117
</textarea>
118118
<textarea id="code" class="playable-html">
119-
<nav>
120-
<ul>
121-
<li><a href="#">Page 1</a></li>
122-
<li><a href="#">Page 2</a></li>
123-
<li><a href="#">Page 3 is longer</a></li>
124-
<li class="push-right"><a href="#">Page 4</a></li>
125-
</ul>
126-
</nav>
119+
<nav>
120+
<ul>
121+
<li><a href="#">Page 1</a></li>
122+
<li><a href="#">Page 2</a></li>
123+
<li><a href="#">Page 3 is longer</a></li>
124+
<li class="push-right"><a href="#">Page 4</a></li>
125+
</ul>
126+
</nav>
127127
</textarea>
128128
<div class="playable-buttons">
129129
<input id="reset" type="button" value="Reset">

0 commit comments

Comments
 (0)