Skip to content

Commit e33aac1

Browse files
NateWrNateWr
committed
Add exercise 11 on flexbox justify-content
1 parent 9ef297c commit e33aac1

File tree

5 files changed

+62
-1
lines changed

5 files changed

+62
-1
lines changed

‎images/11-result.png

14.7 KB
Loading

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"7": "live-server --open=week-1/7-css-box",
1616
"8": "live-server --open=week-1/8-git-branch",
1717
"9": "live-server --open=week-2/9-media-queries",
18-
"10": "live-server --open=week-2/10-flexbox"
18+
"10": "live-server --open=week-2/10-flexbox",
19+
"11": "live-server --open=week-2/11-justify-content"
1920
}
2021
}

‎week-2/11-justify-content/flexbox.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Add your own CSS code below */
2+
.countries {
3+
display: flex;
4+
}
5+
.countries--first {
6+
justify-content: center;
7+
}
8+
.countries--second {
9+
justify-content: space-around;
10+
}

‎week-2/11-justify-content/index.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>11 - Justify Content - 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+
<div class="site-header">
16+
<h1 class="site-header__title">First</h1>
17+
</div>
18+
<ul class="countries countries--first">
19+
<li class="country">1. Brazil</li>
20+
<li class="country">2. Croatia</li>
21+
<li class="country">3. Ethiopia</li>
22+
<li class="country">4. Laos</li>
23+
<li class="country">5. Uganda</li>
24+
</ul>
25+
<div class="site-header">
26+
<h1 class="site-header__title">Second</h1>
27+
</div>
28+
<ul class="countries countries--second">
29+
<li class="country">1. Brazil</li>
30+
<li class="country">2. Croatia</li>
31+
<li class="country">3. Ethiopia</li>
32+
<li class="country">4. Laos</li>
33+
<li class="country">5. Uganda</li>
34+
</ul>
35+
</div>
36+
</body>
37+
38+
</html>

‎week-2/11-justify-content/readme.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Justify Content
2+
3+
With flexbox, the `justify-content` property can be used to control how extra space is used. In this exercise, you'll apply a different `justify-content` property to each list. Follow the steps below to complete this exercise.
4+
5+
1. Apply the `justify-content` property to the _first_ list of countries, so that all the countries are shown in the middle with no space between them.
6+
2. Apply the `justify-content` property to the _second_ list of countries, so that all the countries are shown with equal space around them.
7+
8+
_Hint: You can review how `justify-content` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-6)._
9+
10+
When you're finished, it should look like the image below.
11+
12+
![Screenshot of the country lists with the correct spacing](/images/11-result.png)

0 commit comments

Comments
 (0)