Add example of n-column flexbox

flexbox/flex.html

@@ -14,7 +14,7 @@
     span {
         background-color: aqua;
         width: 80px;
-        height: 80px;
+        height: 40px;
         border: 1px dotted blue;
         margin: 10px;
         padding: 10px;
@@ -35,17 +35,31 @@
         justify-content: center;
     }
 
-    .flex-rows {
+    .flex-row {
         display: flex;
         height: 200px;
         align-content: flex-end;
         flex-flow: row wrap;
     }
 
-    .flex-rows span {
+    .flex-row span {
         flex-grow: 1;
     }
 
+    .flex-n-per-row {
+        display: flex;
+        height: 350px;
+        flex-flow: row wrap;
+        /*justify-content: space-between;*/
+    }
+
+    .flex-n-per-row span {
+    /* the key trick here is the flex-basis 24% which is just below 1/4 => 4 elements would fit on the page
+       in case there is no padding and margin (that is distrubuted separately)
+     */
+    flex: 1 0 24%;
+}
+
 
 
 </style>
@@ -59,7 +73,7 @@
 
 <div class="separator"></div>
 
-<div class="flex-rows">
+<div class="flex-row">
     <span>1</span>
     <span>2</span>
     <span>3</span>
@@ -68,6 +82,22 @@
     <span>6</span>
 </div>
 
+<div class="separator"></div>
+
+<div class="flex-n-per-row">
+    <span>1</span>
+    <span>2</span>
+    <span>3</span>
+    <span>4</span>
+    <span>5</span>
+    <span>6</span>
+    <span>7</span>
+    <span>8</span>
+    <span>9</span>
+    <span>10</span>
+</div>
+
+
 
 </body>
 </html>