flex element properties

Author: rameskum

practice/04 - CSS Layouts/flexbox.html

@@ -50,20 +50,31 @@
 			display: flex;
 			align-items: center;
 			justify-content: flex-start;
-			gap: 30px;
+			gap: 10px;
 		}
 
 		.el {
-			/*margin-right: 30px;*/
+			/*
+			DEFAULTS
+			flex-grow: 0;
+			flex-shrink: 1;
+			flex-basis: auto;
+			*/
+
+			/*flex-grow: 1; !* allow flex to grow *!*/
+			/*flex-shrink: 0; !* allow to shrink ele when required *!*/
+			/*flex-basis: 200px; !* specifies the with of flex items*!*/
+			flex: 1;
 		}
 
 		.el--1 {
 			align-self: flex-start;
+			flex-grow: 1;
 		}
 
 		.el--5 {
 			align-self: stretch;
-			order: 1;
+			order: 2;
 			/* ordering the element. default is 0*/
 		}
 
@@ -79,7 +90,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&#45;&#45;6">languages</div>-->
 <!--	<div class="el el&#45;&#45;7">to</div>-->
 <!--	<div class="el el&#45;&#45;8">learn</div>-->
 </div>