flex

In flex container elements are inline-block and align-item is stretch as default

Author: GulsahDuzgun

starter/04-CSS-Layouts/flexbox.html

@@ -30,6 +30,7 @@
       }
       .el--8 {
         background-color: crimson;
+        padding: 10px;
       }
 
       .container {
@@ -38,7 +39,9 @@
         background-color: #ddd;
         font-size: 40px;
         margin: 40px;
-
+        display: flex;
+        align-items: stretch;
+        justify-content: space-around;
         /* FLEXBOX */
       }
     </style>

starter/04-CSS-Layouts/index.html

@@ -25,8 +25,8 @@ <h1>📘 The Code Magazine</h1>
           <!-- <strong>This is the navigation</strong> -->
           <a href="blog.html">Blog</a>
           <a href="#">Challenges</a>
-          <a href="#">Flexbox</a>
-          <a href="#">CSS Grid</a>
+          <a href="flexbox.html">Flexbox</a>
+          <a href="css-grid.html">CSS Grid</a>
         </nav>
       </header>