css中的蛇状排列

我一直在努力解决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>

原文地址：https://www.jb51.cc/css/214718.html