默认行为：
| A | B | C | D |
| E | F | G | H |
| I | J | K | L |
所需行为：
| A | B | C | D |
| H | G | F | E |
| I | J | K | L |
我研究了grid-auto-flow属性以及direction属性,但是如果不使用javascript,似乎没有解决方法.有没有办法用CSS做到这一点？
最佳答案
您可以使用flex属性和nth-child选择器
<div class="snakeContainer">
<div>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</div>
<div>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
</div>
<div>
<span>I</span>
<span>J</span>
<span>K</span>
<span>L</span>
</div>
</div>
<style>
.snakeContainer div:nth-child(even){
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.snakeContainer div:nth-child(odd){
display: flex;
}
</style>