Skip to content

Commit c1eaccb

Browse files
Rares MateiRares Matei
Rares Matei
authored and
Rares Matei
committed
align items exercises
1 parent 4389186 commit c1eaccb

File tree

9 files changed

+85
-9
lines changed

9 files changed

+85
-9
lines changed

‎exercise-specific-src/12-align-items/custom.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
display: flex;
3+
justify-content: space-evenly;
4+
flex-wrap: wrap;
5+
}
6+
7+
.site-wrapper {
8+
margin-right: 0;
9+
margin-left: 0;
10+
width: 550px;
11+
}
12+
13+
.solution {
14+
max-width: 561px;
15+
}
16+
17+
.countries {
18+
height: 310px;
19+
border: black solid;
20+
}
21+
22+
.countries--tall {
23+
min-height: 0px;
24+
}

‎exercise-specific-src/12-align-items/example1.png

58.8 KB
Loading

‎exercise-specific-src/12-align-items/example2.png

66.7 KB
Loading

‎exercise-specific-src/12-align-items/solution1.png

35.5 KB
Loading

‎exercise-specific-src/12-align-items/solution2.png

33.5 KB
Loading

‎exercise-specific-src/12-align-items/solution3.png

38.9 KB
Loading

‎exercise-specific-src/12-align-items/solution4.png

40.5 KB
Loading

‎week-2/12-align-items/index.html

+49-5
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,76 @@
77
<link rel="stylesheet" href="/css/normalize.css">
88
<link rel="stylesheet" href="/css/week2.css">
99
<link rel="stylesheet" href="/css/week2-flexbox.css">
10-
<link rel="stylesheet" href="flexbox.css">
10+
<link rel="stylesheet" href="flexbox.css">
11+
<link
12+
rel="stylesheet"
13+
href="../../exercise-specific-src/12-align-items/custom.css"
14+
/>
1115
</head>
1216

1317
<body>
1418
<div class="site-wrapper site-wrapper">
1519
<div class="site-header">
16-
<h1 class="site-header__title">First</h1>
20+
<h1 class="site-header__title">Exercises</h1>
1721
</div>
22+
<h3>First</h3>
1823
<ul class="countries countries--tall countries--first">
1924
<li class="country">1. Brazil</li>
2025
<li class="country">2. Croatia</li>
2126
<li class="country">3. Ethiopia</li>
2227
<li class="country">4. Laos</li>
2328
<li class="country">5. Uganda</li>
2429
</ul>
25-
<div class="site-header">
26-
<h1 class="site-header__title">Second</h1>
27-
</div>
30+
<h3>Second</h3>
2831
<ul class="countries countries--tall countries--second">
2932
<li class="country">1. Brazil</li>
3033
<li class="country">2. Croatia</li>
3134
<li class="country">3. Ethiopia</li>
3235
<li class="country">4. Laos</li>
3336
<li class="country">5. Uganda</li>
37+
</ul>
38+
<h3>Third</h3>
39+
<ul class="countries countries--tall countries--third">
40+
<li class="country">1. Brazil</li>
41+
<li class="country">2. Croatia</li>
42+
<li class="country">3. Ethiopia</li>
43+
<li class="country">4. Laos</li>
44+
<li class="country">5. Uganda</li>
45+
</ul>
46+
<h3>Fourth</h3>
47+
<ul class="countries countries--tall countries--fourth">
48+
<li class="country">1. Brazil</li>
49+
<li class="country">2. Croatia</li>
50+
<li class="country">3. Ethiopia</li>
51+
<li class="country">4. Laos</li>
52+
<li class="country">5. Uganda</li>
3453
</ul>
3554
</div>
55+
<div class="site-wrapper site-wrapper">
56+
<div class="site-header">
57+
<h1 class="site-header__title">Solutions</h1>
58+
</div>
59+
<h3>First</h3>
60+
<img
61+
class="solution"
62+
src="../../exercise-specific-src/12-align-items/solution1.png"
63+
/>
64+
<h3>Second</h3>
65+
<img
66+
class="solution"
67+
src="../../exercise-specific-src/12-align-items/solution2.png"
68+
/>
69+
<h3>Third</h3>
70+
<img
71+
class="solution"
72+
src="../../exercise-specific-src/12-align-items/solution3.png"
73+
/>
74+
<h3>Fourth</h3>
75+
<img
76+
class="solution"
77+
src="../../exercise-specific-src/12-align-items/solution4.png"
78+
/>
79+
</div>
3680
</body>
3781

3882
</html>

‎week-2/12-align-items/readme.md

+12-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@
22

33
With flexbox, the `align-items` property can be used to control how the items are positioned inside of the container. In this exercise, you'll apply a different `align-items` property to each list. Follow the steps below to complete this exercise.
44

5-
1. Apply the `align-items` property to the _first_ list of countries, so that all the countries are shown in the middle and left of their container.
6-
2. Apply the `align-items` property to the _second_ list of countries, so that all the countries are shown at the bottom left of their container.
5+
1. Look at the First list of countries. Then look at the First Result displayed in the "Solutions" panel. Find the differences between the two lists.
6+
2. Use `align-items` and `flex-direction` to make the list of countries on the left look like "Solutions" one.
7+
78

89
_Hint: You can review how `align-items` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7)._
910

10-
When you're finished, it should look like the image below.
11+
Study the below two images.
12+
13+
<img alt="Screenshot of flex-direction row" src="../../exercise-specific-src/12-align-items/example1.png" width="500">
14+
15+
<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/12-align-items/example2.png" height="300">
16+
17+
In both of them, `align-items` has the value `center`.
18+
However, in the first picture, `align-items` arranges them vertically. And in the second one, horizontally.
1119

12-
![Screenshot of the country lists with the correct alignment](/images/12-result.png)
20+
So, **aligning** items in Flexbox (blue arrow) works opposite to the **red arrow** (`flex-direction`).

0 commit comments

Comments
 (0)