add bonus exercise

Rares Matei · Rares Matei · commit 98514f71b8db · 2019-01-11T22:01:34.000Z
diff --git a/exercise-specific-src/15-more-flexbox/custom.css b/exercise-specific-src/15-more-flexbox/custom.css
@@ -1,9 +1,3 @@
-body {
-	display: flex;
-	justify-content: space-evenly;
-	flex-wrap: wrap;
-}
-
 .site-wrapper {
     margin-right: 0;
     margin-left: 0;
diff --git a/exercise-specific-src/15-more-flexbox/example1.gif b/exercise-specific-src/15-more-flexbox/example1.gif
diff --git a/exercise-specific-src/15-more-flexbox/example2.gif b/exercise-specific-src/15-more-flexbox/example2.gif
diff --git a/week-2/15-more-flexbox/flexbox.css b/week-2/15-more-flexbox/flexbox.css
@@ -1,4 +1,10 @@
 .countries {
 	display: flex;
 }
+
+.layout-container {
+	display: flex;
+	justify-content: space-evenly;
+}
+
 /* Add your own CSS code below */
diff --git a/week-2/15-more-flexbox/index.html b/week-2/15-more-flexbox/index.html
@@ -15,6 +15,7 @@
 </head>
 
 <body>
+  <div class="layout-container">
   <div class="site-wrapper site-wrapper">
     <div class="site-header">
       <h1 class="site-header__title">Exercises</h1>
@@ -90,6 +91,7 @@ <h3>Fifth</h3>
         src="../../exercise-specific-src/15-more-flexbox/solution5.png"
       />
     </div>
+  </div>
 </body>
 
 </html>
diff --git a/week-2/15-more-flexbox/readme.md b/week-2/15-more-flexbox/readme.md
@@ -1,18 +1,15 @@
 # Item order
 
-The `order` property is used to apply 
+You know what to do by now - see if you can solve as many of the exercises in here!
 
-To do:
+###Bonus exercise:
 
-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.
-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.
+The exercise page currently has a problem. If you have a very small screen, both the exercises and the solutions will be very squished:
 
-_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)._
+<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/15-more-flexbox/example1.gif" height="300">
 
-When you're finished, it should look like the image below.
+But today we also learned about `media-queries`. 
 
-![Screenshot of the country lists with the correct alignment](/images/12-result.png)
+Add code in `flexbox.css` so that when the screen is smaller than `1240px` the containers display like in the below example:
 
-TODO:
-- add order
-- add align self exercises
+<img alt="Screenshot of flex-direction column" src="../../exercise-specific-src/15-more-flexbox/example2.gif" height="300">
