Spacing and aligning flex items

Author: Ronan

starter/04-CSS-Layouts/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

starter/04-CSS-Layouts/flexbox.html

@@ -36,13 +36,32 @@
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
-        font-size: 34px;
+        font-size: 32px;
         margin: 40px;
 
         /* FLEXBOX */
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: flex-start;
+        gap: 30px;
+      }
+
+      .el {
+        /* margin-right: 30px; */
+      }
+
+      .el--1 {
+        align-self: flex-start;
+        /* order: 2; */
+      }
+
+      .el--5 {
+        align-self: stretch;
+        order: 1;
+      }
+
+      .el--6 {
+        order: -1;
       }
     </style>
   </head>
@@ -54,8 +73,8 @@
       <div class="el el--4">are</div>
       <div class="el el--5">amazing</div>
       <div class="el el--6">languages</div>
-      <div class="el el--7">to</div>
-      <div class="el el--8">learn</div>
+      <!-- <div class="el el--7">to</div>
+      <div class="el el--8">learn</div> -->
     </div>
   </body>
 </html>