我一直在努力解决CSS中的以下问题.我有一个任意数量的项目(跨度或div),我想以蛇形图案包裹在容器内.
我的意思是,如果我有10个项目,每个项目的宽度为20px,我希望它们在60px宽的容器中显示如下：
0 1 2
5 4 3
6 7 8
9
我曾尝试在CSS中使用flexBox,但我只能将这些项目显示如下：
0 1 2 3 4 5 6 7 8 9
如果这可以帮助,我知道单个项目的确切宽度,但我不知道容器的宽度.
任何帮助将非常感激.
先感谢您！
解决方法
如果使用parent – rows – items创建HTML结构,则可以使用flex-direction：row-reverse on .row：nth-child(2n)元素,这将创建所需的结果.
.content {
display: flex;
flex-direction: column;
}
.row {
display: flex;
justify-content: space-between;
}
.row:nth-child(2n) {
flex-direction: row-reverse;
}
.row:nth-child(2n):last-child .item {
margin-right: auto;
}
<div class="content">
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="row">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<div class="row">
<div class="item">10</div>
</div>
</div>
