Skip to content

Commit f6b604a

Browse files
Rares MateiRares Matei
Rares Matei
authored and
Rares Matei
committed
more flexbox 10 exercises
1 parent ccc0334 commit f6b604a

File tree

9 files changed

+86
-25
lines changed

9 files changed

+86
-25
lines changed

‎exercise-specific-src/10-flexbox/custom.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
}
11+
12+
.solution {
13+
max-width: 471px;
14+
max-height: 290px;
15+
}

‎exercise-specific-src/10-flexbox/example1.png

30.6 KB
Loading

‎exercise-specific-src/10-flexbox/example2.png

40.7 KB
Loading

‎exercise-specific-src/10-flexbox/solution1.png

16.6 KB
Loading

‎exercise-specific-src/10-flexbox/solution2.png

22.1 KB
Loading

‎exercise-specific-src/10-flexbox/solution3.png

21.8 KB
Loading

‎week-2/10-flexbox/flexbox.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
/* Add your own CSS code below */
1+
/* Add your own CSS code below */

‎week-2/10-flexbox/index.html

+63-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,67 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>10 - Flexbox - HTML, CSS and Git Exercises</title>
6+
<link rel="stylesheet" href="/css/normalize.css" />
7+
<link rel="stylesheet" href="/css/week2.css" />
8+
<link rel="stylesheet" href="/css/week2-flexbox.css" />
9+
<link rel="stylesheet" href="flexbox.css" />
10+
<link
11+
rel="stylesheet"
12+
href="../../exercise-specific-src/10-flexbox/custom.css"
13+
/>
14+
</head>
315

4-
<head>
5-
<meta charset="utf-8">
6-
<title>10 - Flexbox - HTML, CSS and Git Exercises</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-
</head>
12-
13-
<body>
14-
<div class="site-wrapper site-wrapper">
15-
<ul class="countries">
16-
<li class="country">1. Brazil</li>
17-
<li class="country">2. Croatia</li>
18-
<li class="country">3. Ethiopia</li>
19-
<li class="country">4. Laos</li>
20-
<li class="country">5. Uganda</li>
21-
</ul>
22-
</div>
23-
</body>
24-
16+
<body>
17+
<div class="site-wrapper site-wrapper">
18+
<div class="site-header">
19+
<h1 class="site-header__title">Exercises</h1>
20+
</div>
21+
<h3>First</h3>
22+
<ul class="countries countries--first">
23+
<li class="country">1. Brazil</li>
24+
<li class="country">2. Croatia</li>
25+
<li class="country">3. Ethiopia</li>
26+
<li class="country">4. Laos</li>
27+
<li class="country">5. Uganda</li>
28+
</ul>
29+
<h3>Second</h3>
30+
<ul class="countries countries--second">
31+
<li class="country">1. Brazil</li>
32+
<li class="country">2. Croatia</li>
33+
<li class="country">3. Ethiopia</li>
34+
<li class="country">4. Laos</li>
35+
<li class="country">5. Uganda</li>
36+
</ul>
37+
<h3>Third</h3>
38+
<ul class="countries countries--third">
39+
<li class="country">1. Brazil</li>
40+
<li class="country">2. Croatia</li>
41+
<li class="country">3. Ethiopia</li>
42+
<li class="country">4. Laos</li>
43+
<li class="country">5. Uganda</li>
44+
</ul>
45+
</div>
46+
<div class="site-wrapper site-wrapper">
47+
<div class="site-header">
48+
<h1 class="site-header__title">Solutions</h1>
49+
</div>
50+
<h3>First</h3>
51+
<img
52+
class="solution"
53+
src="../../exercise-specific-src/10-flexbox/solution1.png"
54+
/>
55+
<h3>Second</h3>
56+
<img
57+
class="solution"
58+
src="../../exercise-specific-src/10-flexbox/solution2.png"
59+
/>
60+
<h3>Third</h3>
61+
<img
62+
class="solution"
63+
src="../../exercise-specific-src/10-flexbox/solution3.png"
64+
/>
65+
</div>
66+
</body>
2567
</html>

‎week-2/10-flexbox/readme.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22

33
Flexbox is used to change the layout of elements on the HTML page. In this exercise, you'll apply the `flex-direction` property to change how the countries are displayed. Follow the steps below to complete this exercise.
44

5-
1. Open `flexbox.css` and write a CSS rule to apply `display: flex` to the "container" element. _Hint: The "container" element will be the parent element of each country._
5+
1. Open `flexbox.css` and write a CSS rule to apply `display: flex` to the "container" element. _Hint: The "container" element will be the parent element of each country.
66
2. Use the property `flex-direction` to make the countries start from the right instead of the left.
77
3. Try out all the properties you know for `flex-direction` and see how they change the layout.
88
4. When you're done, set the property back so that the countries start from the right instead of the left.
99

1010
_Hint: You can review how `flex-direction` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-3)._
1111

12-
When you're finished, it should look like the image below.
12+
Next, study below two images.
1313

14-
![Screenshot of the country list flowing from right to left](/images/10-result.png)
14+
<img alt="Screenshot of flex-direction row" src="../../exercise-specific-src/10-flexbox/example1.png" width="500">
15+
16+
<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/10-flexbox/example2.png" height="300">
17+
18+
For now, try to imagine `flex-direction` as the red arrow, that is either horizontal (when `flex-direction: row`) or vertical (when `flex-direction: column`):

0 commit comments

Comments
 (0)