Skip to content

Commit 6f9760d

Browse files
bgatesbgates
committed
flexbox and text
1 parent a2c2eb6 commit 6f9760d

File tree

6 files changed

+600
-24
lines changed

6 files changed

+600
-24
lines changed

‎12-flexbox.html

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<title>Position</title>
5+
<title>Flexbox!</title>
66
<style>
77
html {
88
background: #ccc;
@@ -11,45 +11,85 @@
1111
}
1212
body {
1313
background: white;
14-
width: 800px;
14+
width: 960px;
1515
margin: 0 auto;
16-
padding: 1em;
16+
padding: 1rem;
17+
}
18+
img {
19+
width: 48%;
1720
}
1821
h1 {
1922
margin: 0;
20-
padding: 1em 0;
23+
padding: 1rem 0;
2124
}
22-
.outer {
23-
height: 500px;
24-
width: 500px;
25+
.container {
26+
display: flex;
2527
background: blue;
28+
margin: 1rem;
2629
}
27-
.outer p {
30+
.container p {
2831
color: white;
2932
}
30-
.inner {
33+
.item {
3134
height: 100px;
3235
width: 100px;
33-
background: red;
36+
background: green;
37+
margin: 1rem;
38+
font-size: 3rem;
39+
color: white;
40+
}
41+
.col {
42+
flex-direction: column;
43+
/*flex-direction: row-reverse;*/
44+
/*flex-direction: column-reverse;*/
45+
}
46+
.wrap {
47+
flex-wrap: wrap;
48+
/*flex-wrap: wrap-reverse;*/
3449
}
3550
</style>
3651
</head>
3752
<body>
38-
<h1>Positioning</h1>
39-
<div class="outer">
40-
<div class="inner"></div>
53+
<h1>Flexbox</h1>
54+
<img src="https://media.giphy.com/media/BCIoXfA95d1ba/giphy.gif"/>+<img src="https://media.giphy.com/media/jbUX8hH1BwrBK/giphy.gif"/>
55+
<div class="container">
56+
<div class="item">1</div>
57+
<div class="item">2</div>
58+
<div class="item">3</div>
59+
<div class="item">4</div>
4160
<p>Here is some text inside a blue box.</p>
4261
</div>
43-
<h2>Things to Try:</h2>
44-
<ul>
45-
<li>.inner {position: relative; left: 10px}</li>
46-
<li>.inner {position: relative; right: 10px}</li>
47-
<li>.inner {position: relative; right: -10px}</li>
48-
<li>.inner {position: relative; top: 10px}</li>
49-
<li>.inner {position: absolute; top: 10px}</li>
50-
<li>.outer {position: relative} .inner {position: absolute; top: 10px}</li>
51-
<li>.outer {position: relative} .inner {position: absolute; top: 10px; bottom: 20px;} (and unset the height on .inner)</li>
52-
<li>.outer {position: relative} .inner {position: relative; top: 10px}</li>
53-
</ul>
62+
<h2>flex-direction: column</h2>
63+
<div class="container col">
64+
<div class="item">1</div>
65+
<div class="item">2</div>
66+
<div class="item">3</div>
67+
</div>
68+
<h2>flex-wrap: nowrap (default)</h2>
69+
<div class="container">
70+
<div class="item">1</div>
71+
<div class="item">2</div>
72+
<div class="item">3</div>
73+
<div class="item">4</div>
74+
<div class="item">5</div>
75+
<div class="item">6</div>
76+
<div class="item">7</div>
77+
<div class="item">8</div>
78+
<div class="item">9</div>
79+
<div class="item">10</div>
80+
</div>
81+
<h2>flex-wrap: wrap</h2>
82+
<div class="container wrap">
83+
<div class="item">1</div>
84+
<div class="item">2</div>
85+
<div class="item">3</div>
86+
<div class="item">4</div>
87+
<div class="item">5</div>
88+
<div class="item">6</div>
89+
<div class="item">7</div>
90+
<div class="item">8</div>
91+
<div class="item">9</div>
92+
<div class="item">10</div>
93+
</div>
5494
</body>
5595
</html>

‎13-flexbox-2.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Justify Content</title>
6+
<style>
7+
html {
8+
background: #ccc;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
body {
13+
background: white;
14+
width: 960px;
15+
margin: 0 auto;
16+
padding: 1rem;
17+
}
18+
h1 {
19+
margin: 0;
20+
padding: 1rem 0;
21+
}
22+
.container {
23+
display: flex;
24+
background: blue;
25+
margin: 1rem;
26+
}
27+
.container p {
28+
color: white;
29+
}
30+
.item {
31+
height: 100px;
32+
width: 100px;
33+
background: green;
34+
margin: 1rem;
35+
font-size: 3rem;
36+
color: white;
37+
}
38+
.start {
39+
justify-content: flex-start;
40+
}
41+
.end {
42+
justify-content: flex-end;
43+
}
44+
.center {
45+
justify-content: center;
46+
}
47+
.between {
48+
justify-content: space-between;
49+
}
50+
.around {
51+
justify-content: space-around;
52+
}
53+
</style>
54+
</head>
55+
<body>
56+
<h1>Flexbox: Justify-Content</h1>
57+
<img src="https://media.giphy.com/media/PFNN9SAJVRYZ2/giphy.gif"/>
58+
<img src="https://media.giphy.com/media/utNbq8hMRng7S/giphy.gif"/>
59+
<h2>flex-start</h2>
60+
<div class="container start">
61+
<div class="item">1</div>
62+
<div class="item">2</div>
63+
<div class="item">3</div>
64+
<div class="item">4</div>
65+
</div>
66+
<h2>flex-end</h2>
67+
<div class="container end">
68+
<div class="item">1</div>
69+
<div class="item">2</div>
70+
<div class="item">3</div>
71+
<div class="item">4</div>
72+
</div>
73+
<h2>center</h2>
74+
<div class="container center">
75+
<div class="item">1</div>
76+
<div class="item">2</div>
77+
<div class="item">3</div>
78+
<div class="item">4</div>
79+
</div>
80+
<h2>space-between</h2>
81+
<div class="container between">
82+
<div class="item">1</div>
83+
<div class="item">2</div>
84+
<div class="item">3</div>
85+
<div class="item">4</div>
86+
</div>
87+
<h2>space-around</h2>
88+
<div class="container around">
89+
<div class="item">1</div>
90+
<div class="item">2</div>
91+
<div class="item">3</div>
92+
<div class="item">4</div>
93+
</div>
94+
</body>
95+
</html>

‎14-flexbox-3.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Align Items</title>
6+
<style>
7+
html {
8+
background: #ccc;
9+
margin: 0;
10+
padding: 0;
11+
}
12+
body {
13+
background: white;
14+
width: 960px;
15+
margin: 0 auto;
16+
padding: 1rem;
17+
}
18+
h1 {
19+
margin: 0;
20+
padding: 1rem 0;
21+
}
22+
.container {
23+
display: flex;
24+
background: blue;
25+
margin: 1rem;
26+
}
27+
.container p {
28+
color: white;
29+
}
30+
.item {
31+
width: 100px;
32+
background: green;
33+
margin: 1rem;
34+
font-size: 3rem;
35+
color: white;
36+
}
37+
.item:nth-child(1) {
38+
height: 50px;
39+
}
40+
.item:nth-child(2) {
41+
height: 100px;
42+
}
43+
.item:nth-child(3) {
44+
height: 150px;
45+
}
46+
.item:nth-child(4) {
47+
height: 100px;
48+
}
49+
.start {
50+
align-items: flex-start;
51+
}
52+
.end {
53+
align-items: flex-end;
54+
}
55+
.center {
56+
align-items: center;
57+
}
58+
.stretch {
59+
align-items: stretch;
60+
height: 300px;
61+
}
62+
.stretch .item {
63+
height: auto;
64+
}
65+
.baseline {
66+
align-items: baseline;
67+
}
68+
.baseline .item:nth-child(2) {
69+
padding-top: 1em;
70+
}
71+
</style>
72+
</head>
73+
<body>
74+
<h1>Flexbox: Align-Items</h1>
75+
<img src="https://media.giphy.com/media/3oEduVI94O3u3Q9ZXG/giphy.gif"/>
76+
<img src="https://media.giphy.com/media/IZtkzVqZeHwU8/giphy.gif"/>
77+
<h2>flex-start</h2>
78+
<div class="container start">
79+
<div class="item">1</div>
80+
<div class="item">2</div>
81+
<div class="item">3</div>
82+
<div class="item">4</div>
83+
</div>
84+
<h2>flex-end</h2>
85+
<div class="container end">
86+
<div class="item">1</div>
87+
<div class="item">2</div>
88+
<div class="item">3</div>
89+
<div class="item">4</div>
90+
</div>
91+
<h2>center</h2>
92+
<div class="container center">
93+
<div class="item">1</div>
94+
<div class="item">2</div>
95+
<div class="item">3</div>
96+
<div class="item">4</div>
97+
</div>
98+
<h2>stretch</h2>
99+
<div class="container stretch">
100+
<div class="item">1</div>
101+
<div class="item">2</div>
102+
<div class="item">3</div>
103+
<div class="item">4</div>
104+
</div>
105+
<h2>baseline</h2>
106+
<div class="container baseline">
107+
<div class="item">1</div>
108+
<div class="item">2</div>
109+
<div class="item">3</div>
110+
<div class="item">4</div>
111+
</div>
112+
</body>
113+
</html>

0 commit comments

Comments
 (0)