块(蛇形)之类的蛇(zig-zag)顺序

时间:2017-07-04 13:07:28

标签: html css css3 flexbox

我需要对HTML块进行蛇类排序。我可以使用flex-direction: column来完成它,但它只适用于恒定的容器高度。我需要灵活的容器高度取决于浏览器宽度。我希望在没有JavaScript(或使用简单代码)的情况下获得此结果

它应该如何运作:

| ------------------------------------------------- |
| | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10| 11| 12| |
| ------------------------------------------------- |
| --------------------------------- |
| | 1 | 3 | 5 | 7 | 9 | 10| 11| 12| |
| --------------------------------- |
| | 2 | 4 | 6 | 8 |                 |
| -----------------                 |
| --------------------- |
| | 1 | 4 | 7 | 9 | 11| |
| --------------------- |
| | 2 | 5 | 8 | 10| 12| |
| --------------------- |
| | 3 | 6 |             |
| ---------             |
| ------------- |
| | 1 | 5 | 9 | |
| ------------- |
| | 2 | 6 | 10| |
| ------------- |
| | 3 | 7 | 11| |
| ------------- |
| | 4 | 8 | 12| |
| ------------- |

...

0 个答案:

没有答案