Changing the value of flex property for flex items, for all, and also flex-grow, flex-shrink, flex-basis individually.

Author: mirmak4

starter/04-CSS-Layouts/flexbox.html

@@ -44,15 +44,28 @@
                 display: flex;
                 align-items: center;
                 justify-content: flex-start;
-                gap: 50px;
+                gap: 10px;
             }
 
             .el {
-                /* margin-right: 50px; */
+                /* DEFAULTS
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: auto;
+                 */
+
+                /* flex-basis: 200px; */
+                /* flex-shrink: 0; */
+                /* flex: 0 0 200px; */
+
+                /* flex-grow: 1; */
+                /* flex: 1 1 auto; */
+                flex: 1;
             }
 
             .el--4 {
                 align-self: flex-start;
+                /* flex-grow: 3; */
             }
 
             .el--1 {
@@ -76,7 +89,7 @@
             <div class="el el--3">CSS</div>
             <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--6">languages</div> -->
             <!-- <div class="el el--7">to</div> -->
             <!-- <div class="el el--8">learn</div> -->
         </div>