Skip to content

Commit 2fe0a7f

Browse files
meyerwebmeyerweb
committed
Local copies of Chapter 12 (still in progress)
1 parent 2eef96d commit 2fe0a7f

File tree

119 files changed

+11067
-50
lines changed

Some content is hidden

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

119 files changed

+11067
-50
lines changed

‎12-flexbox/02_axes.html‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Flex Items: flex-direction: row;</title>
6+
<link rel="stylesheet" href="c/examples.css">
7+
<style contenteditable>
8+
body {padding: 100px;}
9+
* {}
10+
div {background-color: rgba(0,0,0,0.1)}
11+
article {position: relative; }
12+
article:first-of-type,
13+
article:nth-of-type(2) {border-top: 1px solid red;}
14+
15+
article:last-of-type,
16+
article:nth-of-type(3) {border-left: 1px solid red;}
17+
article > div::before {
18+
content: '⬋ cross axis';
19+
position: absolute;
20+
color: red;
21+
border-left: 2px solid;
22+
height: 105%;
23+
top: 0;
24+
left: 5%;
25+
}
26+
article > div::after {
27+
content: 'main axis ⬈';
28+
color: blue;
29+
text-align: left;
30+
text-indent: 7%;
31+
position: absolute;
32+
border-top: 2px solid;
33+
width: 105%;
34+
left: 0;
35+
top: 25%;
36+
}
37+
article::after,
38+
article::before {
39+
content: '';
40+
border: 7px solid transparent;
41+
position: absolute;
42+
}
43+
article::after {
44+
border-top-color: red;
45+
top: 105%;
46+
left: 4.1%;
47+
}
48+
article:nth-of-type(1)::before {
49+
border-left-color: blue;
50+
top: 22%;
51+
left: 105%;
52+
}
53+
54+
article:nth-of-type(2)::before {
55+
border-right-color: blue;
56+
top: 22%;
57+
left: -6%;
58+
}
59+
60+
article:nth-of-type(n+3)::before {
61+
border-left-color: red;
62+
top: 24.1%;
63+
left: 105%;
64+
}
65+
article:nth-of-type(3)::after {
66+
border-top-color: blue;
67+
top: 105%;
68+
left: 73.5%;
69+
}
70+
article:nth-of-type(4)::after {
71+
border-bottom-color: blue;
72+
border-top-color: transparent;
73+
top: -15%;
74+
left: 73.5%;
75+
}
76+
77+
article:first-of-type p,
78+
article:nth-of-type(2) p {
79+
border-top: 1px solid red;
80+
}
81+
82+
span {
83+
position: relative; left: -10px;
84+
top: 70px;
85+
max-width: 1px;
86+
overflow: visible;
87+
white-space: nowrap;
88+
}
89+
90+
[class^=row] span {
91+
transform: rotate(-90deg);
92+
left: 25px;
93+
}
94+
[class^=row] span:last-of-type {}
95+
96+
article > div {
97+
display: inline-flex;
98+
border: 1px dashed;
99+
padding: 10px;
100+
}
101+
div > div {
102+
border: 1px solid;
103+
height: 50px;
104+
margin: 10px;
105+
line-height: 50px;
106+
flex: 1 1 auto;
107+
min-height: 100px;
108+
}
109+
body {
110+
font-size: 25px;
111+
text-align: center;
112+
}
113+
span {color: blue;}
114+
p {margin-top: 0;}
115+
116+
article:nth-of-type(n+3) > div::before {
117+
content: '⬋ main axis';
118+
position: absolute;
119+
white-space: nowrap;
120+
color: blue;
121+
border-left: 2px solid;
122+
height: 105%;
123+
top: 0;
124+
left: 75%;
125+
}
126+
article:nth-of-type(4) > div::before {
127+
top: -13.6%;
128+
padding-top: 24%;
129+
box-sizing: border-box;
130+
}
131+
article:nth-of-type(n+3) > div::after {
132+
content: 'cross axis ⬈';
133+
color: red;
134+
text-align: left;
135+
text-indent: 57%;
136+
position: absolute;
137+
border-top: 2px solid;
138+
width: 105%;
139+
left: 0;
140+
top: 25%;
141+
}
142+
143+
144+
article:nth-of-type(2) {
145+
margin-bottom: 150px;
146+
}
147+
148+
div:nth-of-type(2):before {
149+
content: "cross start";
150+
color: red;
151+
position: absolute;
152+
top: -33px;
153+
left: 20px;
154+
}
155+
div:nth-of-type(2):after {
156+
content: "cross end";
157+
color: red;
158+
position: absolute;
159+
bottom: 24px;
160+
left: 20px;
161+
}
162+
163+
[class^="col"] span {
164+
position: relative;
165+
left: 300px;
166+
top: -34px;
167+
max-width: 1px;
168+
overflow: visible;
169+
white-space: nowrap;
170+
}
171+
[class^="col"] div:nth-of-type(2):before{
172+
left: -58px;
173+
transform: rotate(-90deg);
174+
top: auto;
175+
}
176+
[class^="col"] div:nth-of-type(2):after{
177+
right: -35px;
178+
transform: rotate(-90deg);
179+
left: auto;
180+
bottom: auto;
181+
}
182+
.column-reverse div:nth-of-type(2):before,
183+
.column-reverse div:nth-of-type(2):after {
184+
bottom: 530px;
185+
}
186+
.row {
187+
flex-direction: row;
188+
}
189+
.row-reverse {
190+
flex-direction: row-reverse;
191+
}
192+
.row-reverse::before {
193+
194+
}
195+
.row-reverse::after {
196+
right: 0;
197+
text-indent: 90%;
198+
left: auto;
199+
}
200+
201+
</style>
202+
</head>
203+
<body>
204+
<article style="margin-bottom: 100px;">
205+
<div class="row">
206+
<span>⬉ main-start</span>
207+
<div>A</div>
208+
<div>B</div>
209+
<div>C</div>
210+
<div>D</div>
211+
<div>E</div>
212+
<span style="left: 60px;">main-end</span>
213+
</div>
214+
<p>flex-direction: row; ⤴</p>
215+
</article>
216+
<article>
217+
<div class="row-reverse">
218+
<span style="left: 60px;">main-start</span>
219+
<div>A</div>
220+
<div>B</div>
221+
<div>C</div>
222+
<div>D</div>
223+
<div>E</div>
224+
<span>main-end</span>
225+
</div>
226+
<p>flex-direction: row-reverse; ⤴</p>
227+
</article>
228+
<article style="width: 45%; float: left">
229+
<div class="column" style="flex-direction: column;">
230+
<span>main-start</span>
231+
<div>A</div>
232+
<div>B</div>
233+
<div>C</div>
234+
<div>D</div>
235+
<div>E</div>
236+
<span style="top: 15px;">main-end</span>
237+
</div>
238+
<p>flex-direction: column; ⤴</p>
239+
</article><article style="width: 45%; float: right">
240+
<div class="column-reverse" style="flex-direction: column-reverse;">
241+
<span style="top: 15px;">main-start</span>
242+
<div>A</div>
243+
<div>B</div>
244+
<div>C</div>
245+
<div>D</div>
246+
<div>E</div>
247+
<span>main-end</span>
248+
</div>
249+
<p>flex-direction: column-reverse; ⤴</p>
250+
</article>
251+
</body>
252+
</html>

0 commit comments

Comments
 (0)