Add exercise 10 on flexbox

NateWr · NateWr · commit e7375a8bf033 · 2018-08-25T16:04:02.000+01:00
diff --git a/css/week2-flexbox.css b/css/week2-flexbox.css
@@ -0,0 +1,21 @@
+.site-wrapper {
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.countries + .site-header {
+	margin-top: 2rem;
+}
+
+.country {
+	margin-top: 0;
+}
+
+@media (min-width: 800px) {
+	.site-wrapper {
+		max-width: 800px;
+		margin: 2rem auto;
+		border-radius: 3px;
+	}
+}
diff --git a/css/week2.css b/css/week2.css
@@ -24,16 +24,13 @@ body {
 
 .country {
 	display: block;
+	margin-top: 0.5rem;
 	padding: 1rem;
 	background: #fff;
 	border: 1px solid rgba(0,0,0,0.2);
 	border-radius: 2px;
 }
 
-.country + .country {
-	margin-top: 0.5rem;
-}
-
 @media (min-width: 1200px) {
 	.site-wrapper {
 		margin: 2rem auto;
diff --git a/images/9-result.png b/images/9-result.png
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "6": "live-server --open=week-1/6-css-properties",
     "7": "live-server --open=week-1/7-css-box",
     "8": "live-server --open=week-1/8-git-branch",
-    "9": "live-server --open=week-2/9-media-queries"
+    "9": "live-server --open=week-2/9-media-queries",
+    "10": "live-server --open=week-2/10-flexbox"
   }
 }
diff --git a/week-2/10-flexbox/flexbox.css b/week-2/10-flexbox/flexbox.css
@@ -0,0 +1 @@
+/* Add your own CSS code below */
diff --git a/week-2/10-flexbox/index.html b/week-2/10-flexbox/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>10 - Flexbox - HTML, CSS and Git Exercises</title>
+  <link rel="stylesheet" href="/css/normalize.css">
+  <link rel="stylesheet" href="/css/week2.css">
+	<link rel="stylesheet" href="/css/week2-flexbox.css">
+	<link rel="stylesheet" href="flexbox.css">
+</head>
+
+<body>
+  <div class="site-wrapper site-wrapper">
+    <ul class="countries">
+			<li class="country">1. Brazil</li>
+			<li class="country">2. Croatia</li>
+			<li class="country">3. Ethiopia</li>
+			<li class="country">4. Laos</li>
+			<li class="country">5. Uganda</li>
+		</ul>
+  </div>
+</body>
+
+</html>
diff --git a/week-2/10-flexbox/readme.md b/week-2/10-flexbox/readme.md
@@ -0,0 +1,12 @@
+# Flexbox
+
+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.
+
+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._
+2. Use the property `flex-direction` to make the countries start from the right instead of the left.
+
+_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)._
+
+When you're finished, it should look like the image below.
+
+![Screenshot of the country list flowing from right to left](/images/10-result.png)

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`"6": "live-server --open=week-1/6-css-properties",`
`15`	`15`	`"7": "live-server --open=week-1/7-css-box",`
`16`	`16`	`"8": "live-server --open=week-1/8-git-branch",`
`17`		`- "9": "live-server --open=week-2/9-media-queries"`
	`17`	`+ "9": "live-server --open=week-2/9-media-queries",`
	`18`	`+ "10": "live-server --open=week-2/10-flexbox"`
`18`	`19`	`}`
`19`	`20`	`}`