css中的蛇状排列

Question

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

如果这可以帮助,我知道单个项目的确切宽度,但我不知道容器的宽度.

任何帮助将非常感激.

先感谢您!

Answer 1

如果你创建你的HTML结构parent- rows- items您可以使用flex-direction: row-reverse上.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>