section-4: Flexbox sandbox.

Author: owen-webb

starter/04-CSS-Layouts/flexbox.html

@@ -36,10 +36,42 @@
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
-        font-size: 40px;
+        font-size: 32px;
         margin: 40px;
 
         /* FLEXBOX */
+        align-items: center;
+        display: flex;
+        gap: 10px;
+        justify-content: flex-start;
+      }
+
+      .el {
+
+        /* DEFAULTS:
+        flex-grow: 0;
+        flex-shrink: 1;
+        flex-basis: auto; */
+
+        /* flex-basis: 200px; */
+        /* flex-shrink: 0; */
+        /* flex-grow: 1; */
+        flex: 1;
+      }
+
+      .el--1 {
+        align-self: flex-start;
+        /* order: 2; */
+        /* flex-grow: 3; */
+      }
+
+      .el--5 {
+        align-self: stretch;
+        order: 1;
+      }
+
+      .el--6 {
+        order: -1;
       }
     </style>
   </head>