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
|
|