I'm kind of late to CSS flexible layout and I find this is quite challenging in CSS. I need a layout where the sorted block items are arranged as if they are chain-linked so that the distance between neighbor items is all 1 segment. The layout may be in rows or columns. The number of items can be varied and no fixed number of rows or columns is in mind intending flexible responsive design. Point is that the order of items needs to be matched to the imaginary stream-like visual clue.
For 9 items and 3 columns (rows layout) it'll look like this(sketch image):
| 1 | 2 | 3 |
|---|---|---|
| 6 | 5 | 4 |
|---|---|---|
| 7 | 8 | 9 |
The columns layout version:
| 1 | 6 | 7 |
|---|---|---|
| 2 | 5 | 8 |
|---|---|---|
| 3 | 4 | 9 |
But what we normally get is the layout where the items are arranged in text flow manner, eg. for the default left-to-right text flow it'll look like this(rows layout):
| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
|---|---|---|
| 7 | 8 | 9 |
The size of each item can also be varied but I don't think it's an issue here because flexbox already does a good job for this. Challenge for me is to create a neat CSS solution for stream-like flow direction alternating flow direction every other row or column automatically with flexible layout (meaning number of rows or columns changed dynamically).
Quick thought is to alternate flow direction every other row or columns just like alternating table row colors for visual assistance but I find flexbox is essentially a one-dimensional linear container with wrapping (inserting chopping points to create segments to become rows or columns). Or flexbox is not an option and we need a grid instead? I wonder JavaScript solution could help, but seriously, CSS really can't do this?
