feat: use flex-basis instead of width and min-width

Author: alexisLefebvre

index.html

@@ -173,19 +173,19 @@ <h3>4 columns with same width <a href="#table-of-content">↑</a></h3>
         <div class="flex one-one-one-one">
             <div>
                 <h4>🐶 1</h4>
-                <p><img src=" https://placedog.net/180/135?id=1" width="180" height="135" alt="🐶 1"></p>
+                <p><img src="https://placedog.net/140/105?id=1" width="180" height="135" alt="🐶 1"></p>
             </div>
             <div>
                 <h4>🐶 2</h4>
-                <p><img src=" https://placedog.net/180/135?id=2" width="180" height="135" alt="🐶 2"></p>
+                <p><img src="https://placedog.net/140/105?id=2" width="180" height="135" alt="🐶 2"></p>
             </div>
             <div>
                 <h4>🐶 3</h4>
-                <p><img src=" https://placedog.net/180/135?id=3" width="180" height="135" alt="🐶 3"></p>
+                <p><img src="https://placedog.net/140/105?id=3" width="180" height="135" alt="🐶 3"></p>
             </div>
             <div>
                 <h4>🐶 4</h4>
-                <p><img src=" https://placedog.net/180/135?id=4" width="180" height="135" alt="🐶 4"></p>
+                <p><img src="https://placedog.net/140/105?id=4" width="180" height="135" alt="🐶 4"></p>
             </div>
         </div>
 
@@ -194,19 +194,19 @@ <h4>🐶 4</h4>
             <pre>&lt;div class="flex one-one-one-one"&gt;
     &lt;div&gt;
         &lt;h4&gt;🐶 1&lt;/h4&gt;
-        &lt;p&gt;&lt;img src=" https://placedog.net/180/135?id=1" width="180" height="135" alt="🐶 1"&gt;&lt;/p&gt;
+        &lt;p&gt;&lt;img src="https://placedog.net/180/135?id=1" width="180" height="135" alt="🐶 1"&gt;&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
         &lt;h4&gt;🐶 2&lt;/h4&gt;
-        &lt;p&gt;&lt;img src=" https://placedog.net/180/135?id=2" width="180" height="135" alt="🐶 2"&gt;&lt;/p&gt;
+        &lt;p&gt;&lt;img src="https://placedog.net/180/135?id=2" width="180" height="135" alt="🐶 2"&gt;&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
         &lt;h4&gt;🐶 3&lt;/h4&gt;
-        &lt;p&gt;&lt;img src=" https://placedog.net/180/135?id=3" width="180" height="135" alt="🐶 3"&gt;&lt;/p&gt;
+        &lt;p&gt;&lt;img src="https://placedog.net/180/135?id=3" width="180" height="135" alt="🐶 3"&gt;&lt;/p&gt;
     &lt;/div&gt;
     &lt;div&gt;
         &lt;h4&gt;🐶 4&lt;/h4&gt;
-        &lt;p&gt;&lt;img src=" https://placedog.net/180/135?id=4" width="180" height="135" alt="🐶 4"&gt;&lt;/p&gt;
+        &lt;p&gt;&lt;img src="https://placedog.net/180/135?id=4" width="180" height="135" alt="🐶 4"&gt;&lt;/p&gt;
     &lt;/div&gt;
 &lt;/div&gt;</pre>
         </details>

new.grid.css

@@ -6,23 +6,19 @@
 }
 
 .flex.one-one > div {
-    flex-grow: 1;
-    min-width: 48%;
+    flex-basis: 48%;
 }
 
 .flex.one-two > div:first-child {
-    min-width: 30%;
-    flex-grow: 1;
+    flex-basis: 30%;
 }
 
 .flex.one-two > div:last-child {
-    min-width: 65%;
-    flex-grow: 2;
+    flex-basis: 65%;
 }
 
 .flex.one-one-one-one > div {
-    min-width: 20%;
-    flex-grow: 1;
+    flex-basis: 25%;
 }
 
 /* responsiveness */
@@ -37,10 +33,6 @@
         flex-wrap: wrap;
     }
     .flex.one-one-one-one > div {
-        width: 40%;
-    }
-
-    .flex.one-one-one-one > div img {
-        min-width: 180px;
+        flex-basis: 45%;
     }
 }