Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  




           


Create a Dynamic Column and Row List with Flex Property
If you want to tile a list of N items into C columns, wrapping to create as many rows as needed to fit all N items, you can use the CSS flex property.
Example of the alphabet flexing into 4 columns (if that's what fits horizontally):
A B C D
E F G H
I J ......

Code:
<div style="display:flex;flex-direction:row;flex-wrap:wrap;">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
etc....
</div>

If you prefer them to tile vertically, change the direction, set a height, and it will generate the required # of columns:


<div style="display:flex;flex-direction:column;flex-wrap:wrap;height:400px;">

Result:
A D G
B E H
C F

NOTE: In IE Edge on Windows 7, items may stretch unexpectedly (such as if they contain select elements).
To stop this, add style 'flex:none' to the inner span elements.

Created By: amos 3/4/2019 2:06:38 PM
Updated: 3/27/2019 12:17:35 PM