在 flex-box 的开头而不是结尾处留空答案

【问题标题】：Leave empty space at beginning of flex-box instead of the end在 flex-box 的开头而不是结尾处留空
【发布时间】：2022-01-15 20:37:22
【问题描述】：

我有按列排列的框，从上到下，从左到右，如下所示：

.container {
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 8px;
  text-align: center;
  color: white;
  font-size: 24pt;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

第 10 个框下方有一些空白空间，因为它的列中还有两个框的空间。

不是在末尾有这个空格，而是可以在开头留这个空格吗？这是我的意思的图像：

如果可以在不更改标记的情况下实现这一点，那将是更可取的，但如有必要，可以颠倒项目的顺序或添加一些额外的标记。它应该可以与任意数量的框一起正常工作。

【问题讨论】：

是否可以颠倒 div 的顺序？他们从 10 ... 1 开始，如果是这样我有一个解决方案
@John 可以接受

标签： html css flexbox

【解决方案1】：

好吧，我只是颠倒了你的 div 顺序，添加了 direction:rtl ，并颠倒了列顺序。塔达

.container {
  height: 400px;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
direction:rtl;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 8px;
  text-align: center;
  color: white;
  font-size: 24pt;
}

<div class="container">
  <div class="box">10</div>
  <div class="box">9</div>
  <div class="box">8</div>
  <div class="box">7</div>
  <div class="box">6</div>
  <div class="box">5</div>
  <div class="box">4</div>
  <div class="box">3</div>
  <div class="box">2</div>
  <div class="box">1</div>
</div>

【讨论】：