Skip to content

Commit 730456d

Browse files
meyerwebmeyerweb
authored
Merge pull request meyerweb#4 from estelle/master
edits
2 parents 9f19bdc + 9f4eee7 commit 730456d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+3443
-2322
lines changed

‎12-flexbox/align-content-overflow.html‎

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,28 @@
66

77
<link rel="stylesheet" href="c/examples.css"/>
88

9-
<style type="text/css">
10-
body {padding: 10px; display: flex; justify-content: space-evenly; flex-wrap: wrap;}
11-
div {background-color: rgba(0,0,0,0.1);}
12-
article {position: relative; display: flex; flex-direction: row-reverse;}
13-
article > p {writing-mode: vertical-lr; width: 1.5em; margin: 100px 0 0;}
9+
<style>
10+
body {
11+
padding: 10px;
12+
display: flex;
13+
justify-content: space-evenly;
14+
flex-flow: wrap;
15+
font-size: 25px;
16+
text-align: center;
17+
}
18+
div {
19+
background-color: rgba(0,0,0,0.1);
20+
}
21+
article {
22+
position: relative;
23+
display: flex;
24+
flex-direction: row-reverse;
25+
}
26+
article > p {
27+
writing-mode: vertical-lr;
28+
width: 1.5em;
29+
margin: 120px 0;
30+
}
1431
article > div {
1532
position: relative;
1633
display: flex;
@@ -29,15 +46,16 @@
2946
background-color: rgb(208,208,208);
3047
letter-spacing: 2px;
3148
}
32-
.stretch {flex: 0 1 0;}
33-
body {
34-
font-size: 25px;
35-
text-align: center;
49+
.stretch {
50+
flex: 0 1 0;
51+
}
52+
p {
53+
margin: 0 -20px 40px;
3654
}
37-
p {margin: 0 -20px 40px;}
3855
.stretch {
3956
align-self: stretch;
40-
width: 1px; margin-left: -2px;
57+
width: 1px;
58+
margin-left: -2px;
4159
background-color: transparent;
4260
border-color: transparent;
4361
}
@@ -47,9 +65,15 @@
4765
left: 0; right: 0;
4866
border-top: 1px solid red;
4967
}
50-
.a, .f, .k {margin-left: 20px;}
51-
.e, .j, .k {margin-right: 20px;}
52-
.k {flex: 0 1 2ch;}
68+
.a, .f, .k {
69+
margin-left: 20px;
70+
}
71+
.e, .j, .k {
72+
margin-right: 20px;
73+
}
74+
.k {
75+
flex: 0 1 2ch;
76+
}
5377
.e:after,
5478
.f:after,
5579
.k:after {
@@ -74,7 +98,6 @@
7498
}
7599
.stretch:last-of-type:before,
76100
article:last-of-type p:before {
77-
78101
transform: translatey(-2px);
79102
}
80103
</style>
@@ -100,6 +123,10 @@
100123
</div>
101124
<p>align-content: stretch; ⤴</p>
102125
</article>
126+
127+
128+
129+
103130
<article>
104131
<div style="align-content: flex-start">
105132
<div class="a">A</div>
@@ -179,6 +206,10 @@
179206
</div>
180207
<p>align-content: space-between; ⤴</p>
181208
</article>
209+
210+
211+
212+
182213
<article>
183214
<div style="align-content: space-around;">
184215
<div class="a">A</div>
@@ -198,6 +229,10 @@
198229
</div>
199230
<p>align-content: space-around; ⤴</p>
200231
</article>
232+
233+
234+
235+
201236
<article>
202237
<div style="align-content: space-evenly;">
203238
<div class="a">A</div>

‎12-flexbox/align-content-space-distribution.html‎

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,26 @@
44
<meta charset="utf-8"/>
55
<title>Flex Items: align-content</title>
66
<link rel="stylesheet" href="c/examples.css"/>
7-
<style type="text/css">
8-
body {padding: 1ch;
7+
<style>
8+
body {
9+
padding: 1ch;
910
font-size: 25px;
1011
text-align: center;
1112
display: flex;
12-
flex-wrap: wrap;
13+
flex-flow: wrap;
14+
}
15+
article {
16+
display: flex;
17+
flex-flow: wrap;
18+
flex: 1 1 400px;
19+
justify-content: center;
20+
}div {
21+
background-color: rgba(0,0,0,0.1);
1322
}
14-
article {display: flex; flex-wrap: wrap; flex: 1 1 400px; justify-content: center;}
15-
div {background-color: rgba(0,0,0,0.1)}
1623
article > div {
1724
display: flex;
18-
flex-direction: row;
25+
flex-flow: row wrap;
1926
align-items: stretch;
20-
flex-wrap: wrap;
2127
border: 1px dashed;
2228
box-sizing: border-box;
2329
height: 500px;
@@ -37,12 +43,27 @@
3743
border-top: 2px solid red;
3844
border-bottom: 2px solid blue;
3945
}
40-
.k {flex: 1 0 95%;}
46+
.k {
47+
flex: 1 0 95%;
48+
}
4149

42-
article > .labels {margin: 1px 0.25ch; padding: 0; list-style: none; font-style: italic;}
43-
article > .labels li {box-sizing: border-box;
44-
display: flex; align-items: center; padding: 1px 0 1px 1.5ch;}
45-
article > .labels li.n {opacity: 0; width: 1ch; background: #FAA;}
50+
article > .labels {
51+
margin: 1px 0.25ch;
52+
padding: 0;
53+
list-style: none;
54+
font-style: italic;
55+
}
56+
article > .labels li {
57+
box-sizing: border-box;
58+
display: flex;
59+
align-items: center;
60+
padding: 1px 0 1px 1.5ch;
61+
}
62+
article > .labels li.n {
63+
opacity: 0;
64+
width: 1ch;
65+
background: #FAA;
66+
}
4667
article > .labels li:not(.n) {
4768
color: purple;
4869
background-image: linear-gradient(blue, blue),
@@ -53,24 +74,35 @@
5374
background-position: 0 0, 1ch 0, 0 100%;
5475
}
5576

56-
article:nth-of-type(1) .labels li:not(.n) {height: 60px;}
57-
article:nth-of-type(2) .labels li:not(.n) {height: 20px;}
58-
article:nth-of-type(3) .labels li:not(.n) {height: 30px;}
77+
article:nth-of-type(1) .labels li:not(.n) {
78+
height: 60px;
79+
}
80+
article:nth-of-type(2) .labels li:not(.n) {
81+
height: 20px;
82+
}
83+
article:nth-of-type(3) .labels li:not(.n) {
84+
height: 30px;
85+
}
5986

6087
article:nth-of-type(2) > .labels li:nth-child(3),
6188
article:nth-of-type(2) > .labels li:nth-child(6) {
6289
background-image: linear-gradient(blue, blue),
6390
linear-gradient(blue, purple),
6491
linear-gradient(purple, purple);
65-
background-size: 1ch 2px, 2px 100%, 1ch 1px;}
92+
background-size: 1ch 2px, 2px 100%, 1ch 1px;
93+
}
6694
article:nth-of-type(2) > .labels li:nth-child(4),
6795
article:nth-of-type(2) > .labels li:nth-child(7) {
6896
background-image: linear-gradient(purple, purple),
6997
linear-gradient(purple, red),
7098
linear-gradient(red, red);
71-
background-size: 1ch 1px, 2px 100%, 1ch 2px;}
99+
background-size: 1ch 1px, 2px 100%, 1ch 2px;
100+
}
72101

73-
article > p {flex: 1 0 100%; padding-right: 4ch;}
102+
article > p {
103+
flex: 1 0 100%;
104+
padding-right: 4ch;
105+
}
74106

75107
</style>
76108
</head>

‎12-flexbox/align_items.html‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,76 +4,79 @@
44
<meta charset="utf-8"/>
55
<title>Flex Items: align-items</title>
66
<link rel="stylesheet" href="c/examples.css"/>
7-
<style type="text/css">
8-
body {padding: 100px;}
9-
div {background-color: rgba(0,0,0,0.1)}
10-
article {position: relative; width: 442px;}
11-
article > div {
12-
display: inline-flex;
13-
flex-flow: row wrap;
14-
border: 1px dashed;
15-
}
16-
article > div > div {
17-
border: 1px solid;
18-
margin: 0 10px;
19-
20-
}
21-
.c, .h {
22-
margin-top: 10px;
23-
}
24-
.d, .i {
25-
margin-top: 20px;
26-
}
27-
.j {
28-
font-size: 3rem;
29-
}
7+
<style>
8+
body {
9+
padding: 100px;
10+
font-size: 25px;
11+
text-align: center;
12+
}
13+
div {
14+
background-color: rgba(0,0,0,0.1);
15+
}
16+
article {
17+
position: relative; width: 442px;
18+
}
19+
article > div {
20+
display: inline-flex;
21+
flex-flow: row wrap;
22+
border: 1px dashed;
23+
}
24+
article > div > div {
25+
border: 1px solid;
26+
margin: 0 10px;
27+
28+
}
29+
.c, .h {
30+
margin-top: 10px;
31+
}
32+
.d, .i {
33+
margin-top: 20px;
34+
}
35+
.j {
36+
font-size: 3rem;
37+
}
3038
div > div {
3139
border: 1px solid;
3240
margin: 0 10px 0;
3341
}
34-
35-
body {
36-
font-size: 25px;
37-
text-align: center;
42+
p {
43+
margin-top: 0;
3844
}
39-
p {margin-top: 0;}
4045
.k:before,
4146
.e:after,
4247
.f:after,
4348
.k:after,
4449
article:before,
4550
div[style*="baseline"] .j:before,
4651
div[style*="baseline"] .j:after,
47-
div[style*="baseline"] .d:after{
52+
div[style*="baseline"] .d:after {
4853
content: '';
4954
position: absolute;
50-
left: 0; right: 0;
55+
left: 0;
56+
right: 0;
5157
border-top: 1px solid red;
5258
height: 1px;
5359
}
54-
5560
div:before {
5661
margin-top: -1px;
5762
}
58-
.j {font-size: 3rem;}
63+
.j {
64+
font-size: 3rem;
65+
}
5966
.e:after,
6067
.f:after,
6168
.k:after {
6269
border-top: none; height: 1.2em;
6370
border-bottom: 1px solid blue;
6471
}
65-
66-
6772
div[style*="baseline"] .j:after{
68-
top: 4.7em;
69-
border-color: green;
73+
top: 4.7em;
74+
border-color: green;
7075
}
71-
7276
div[style*="baseline"] .d:after{
73-
top: 2.07em;
74-
border-color: green;
77+
top: 2.07em;
78+
border-color: green;
7579
}
76-
7780
</style>
7881
</head>
7982
<body>

0 commit comments

Comments
 (0)