Skip to content

Commit 12b443c

Browse files
Rares MateiRares Matei
Rares Matei
authored and
Rares Matei
committed
add order and align-self exercises
1 parent d8958b3 commit 12b443c

20 files changed

+179
-0
lines changed

‎images/13-googling-flexbox.png

150 KB
Loading

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
"10": "live-server --open=week-2/10-flexbox",
1818
"11": "live-server --open=week-2/11-justify-content",
1919
"12": "live-server --open=week-2/12-align-items",
20+
"13": "live-server --open=week-2/13-order",
21+
"14": "live-server --open=week-2/14-align-self",
2022
"serve": "live-server"
2123
},
2224
"devDependencies": {

‎week-2/13-order/flexbox.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.countries {
2+
display: flex;
3+
}
4+
5+
/* Add your own CSS code below */

‎week-2/13-order/ignore_this_folder/custom.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.solution-example {
2+
height: 62px;
3+
}

‎week-2/13-order/ignore_this_folder/ex1.png

16.8 KB
Loading

‎week-2/13-order/ignore_this_folder/ex2.png

16 KB
Loading

‎week-2/13-order/ignore_this_folder/ex3.png

16.1 KB
Loading

‎week-2/13-order/index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox</title>
7+
<link rel="stylesheet" href="/css/normalize.css">
8+
<link rel="stylesheet" href="/css/week2.css">
9+
<link rel="stylesheet" href="/css/week2-flexbox.css">
10+
<link rel="stylesheet" href="flexbox.css">
11+
<link rel="stylesheet" href="./ignore_this_folder/custom.css">
12+
</head>
13+
14+
<body>
15+
<div class="site-wrapper site-wrapper">
16+
<div class="site-header">
17+
<h1 class="site-header__title">First</h1>
18+
</div>
19+
<ul class="countries countries--first">
20+
<li class="country" id="brazil">Brazil</li>
21+
<li class="country" id="croatia">Croatia</li>
22+
<li class="country" id="ethiopia">Ethiopia</li>
23+
<li class="country" id="laos">Laos</li>
24+
<li class="country" id="uganda">Uganda</li>
25+
</ul>
26+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
27+
<img class="solution-example" src="./ignore_this_folder/ex1.png">
28+
<div class="site-header">
29+
<h1 class="site-header__title">Second</h1>
30+
</div>
31+
<ul class="countries countries--second">
32+
<li class="country" id="brazil">Brazil</li>
33+
<li class="country" id="croatia">Croatia</li>
34+
<li class="country" id="ethiopia">Ethiopia</li>
35+
<li class="country" id="laos">Laos</li>
36+
<li class="country" id="uganda">Uganda</li>
37+
</ul>
38+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
39+
<img class="solution-example" src="./ignore_this_folder/ex2.png">
40+
<div class="site-header">
41+
<h1 class="site-header__title">Third</h1>
42+
</div>
43+
<ul class="countries countries--third">
44+
<li class="country" id="brazil">Brazil</li>
45+
<li class="country" id="croatia">Croatia</li>
46+
<li class="country" id="ethiopia">Ethiopia</li>
47+
<li class="country" id="laos">Laos</li>
48+
<li class="country" id="uganda">Uganda</li>
49+
</ul>
50+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
51+
<img class="solution-example" src="./ignore_this_folder/ex3.png">
52+
<p>Bonus points: there are two solutions to this exercise. See if you can find both.</p>
53+
</div>
54+
</body>
55+
56+
</html>

‎week-2/13-order/readme.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Item order
2+
3+
The `flex-order` property is used to move a *specific* item to a different position in the list.
4+
5+
> **Remember:** if you forgot how to use the `flex-order` property, you can always:
6+
> 1. Google the word "flexbox"
7+
> 2. Click on the link from "CSS-tricks"
8+
> ![Screenshot of how to google flexbox](/images/13-googling-flexbox.png)
9+
10+
Exercise:
11+
12+
1. Open up the HTML page for this exercise in Chrome
13+
2. Make sure each list of countries looks the image below it

‎week-2/14-align-self/.DS_Store

6 KB
Binary file not shown.

‎week-2/14-align-self/flexbox.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.countries {
2+
display: flex;
3+
}
4+
/* Add your own CSS code below */
5+
6+
.countries--first {
7+
flex-direction: column;
8+
align-items: flex-start;
9+
}
10+
11+
.countries--first #uganda {
12+
align-self: center;
13+
}

‎week-2/14-align-self/ignore_this_folder/.DS_Store

6 KB
Binary file not shown.

‎week-2/14-align-self/ignore_this_folder/custom.css

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.countries--tall {
2+
min-height: 200px;
3+
}
4+
5+
.solution-example {
6+
height: 212px;
7+
}

‎week-2/14-align-self/ignore_this_folder/ex1.png

41 KB
Loading

‎week-2/14-align-self/ignore_this_folder/ex2.png

34.1 KB
Loading

‎week-2/14-align-self/ignore_this_folder/ex3.png

33.3 KB
Loading

‎week-2/14-align-self/ignore_this_folder/ex4.png

39.1 KB
Loading

‎week-2/14-align-self/ignore_this_folder/example1.png

66.5 KB
Loading

‎week-2/14-align-self/index.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flexbox</title>
7+
<link rel="stylesheet" href="/css/normalize.css">
8+
<link rel="stylesheet" href="/css/week2.css">
9+
<link rel="stylesheet" href="/css/week2-flexbox.css">
10+
<link rel="stylesheet" href="flexbox.css">
11+
<link rel="stylesheet" href="./ignore_this_folder/custom.css">
12+
</head>
13+
14+
<body>
15+
<div class="site-wrapper site-wrapper">
16+
<div class="site-header">
17+
<h1 class="site-header__title">First</h1>
18+
</div>
19+
<ul class="countries countries--tall countries--first">
20+
<li class="country" id="brazil">Brazil</li>
21+
<li class="country" id="croatia">Croatia</li>
22+
<li class="country" id="ethiopia">Ethiopia</li>
23+
<li class="country" id="laos">Laos</li>
24+
<li class="country" id="uganda">Uganda</li>
25+
</ul>
26+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
27+
<img class="solution-example" src="./ignore_this_folder/ex1.png">
28+
<div class="site-header">
29+
<h1 class="site-header__title">Second</h1>
30+
</div>
31+
<ul class="countries countries--tall countries--second">
32+
<li class="country" id="brazil">Brazil</li>
33+
<li class="country" id="croatia">Croatia</li>
34+
<li class="country" id="ethiopia">Ethiopia</li>
35+
<li class="country" id="laos">Laos</li>
36+
<li class="country" id="uganda">Uganda</li>
37+
</ul>
38+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
39+
<img class="solution-example" src="./ignore_this_folder/ex2.png">
40+
<div class="site-header">
41+
<h1 class="site-header__title">Third</h1>
42+
</div>
43+
<ul class="countries countries--tall countries--third">
44+
<li class="country" id="brazil">Brazil</li>
45+
<li class="country" id="croatia">Croatia</li>
46+
<li class="country" id="ethiopia">Ethiopia</li>
47+
<li class="country" id="laos">Laos</li>
48+
<li class="country" id="uganda">Uganda</li>
49+
</ul>
50+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
51+
<img class="solution-example" src="./ignore_this_folder/ex3.png">
52+
<div class="site-header">
53+
<h1 class="site-header__title">Fourth</h1>
54+
</div>
55+
<ul class="countries countries--tall countries--fourth">
56+
<li class="country" id="brazil">Brazil</li>
57+
<li class="country" id="croatia">Croatia</li>
58+
<li class="country" id="ethiopia">Ethiopia</li>
59+
<li class="country" id="laos">Laos</li>
60+
<li class="country" id="uganda">Uganda</li>
61+
</ul>
62+
<p>⬇️⬇️ should look like this ⬇️⬇️</p>
63+
<img class="solution-example" src="./ignore_this_folder/ex4.png">
64+
</div>
65+
</body>
66+
67+
</html>

‎week-2/14-align-self/readme.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Align self
2+
3+
With `align-items` you move all the items at once (on the **non-main axis**).
4+
With `align-self` you move only one of the items.
5+
6+
![Example of align-items vs. align-self](./ignore_this_folder/example1.png)
7+
8+
You can use the same values for `align-self` as you used for `align-items`.
9+
10+
Exercise:
11+
12+
1. Open up the HTML page for this exercise in Chrome
13+
2. Make sure each list of countries looks the image below it

0 commit comments

Comments
 (0)