使flex项目从底部到顶部排列

Question

下面的HTML和CSS创建了一个“条形图”。但是，图表列从上往下增长。我该如何使它们从下往上增长？

* {
  box-sizing: border-box;
  font-size: 0;
  text-align: center;
  line-height: 50px;
}

.bar-chart {
  box-shadow: none;
  height: calc(50px * 3);
  width: calc(50px * 4);
}

.column {
  display: inline-flex;
  width: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  height: 150px;
}

.cell {
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  width: 50px;
  height: 50px;
  font-size: 14pt;
}

<figure class="bar-chart">
  <div class="column">
    <div class="cell">one</div>
    <div class="cell">two</div>
  </div>
  <div class="column">
    <div class="cell">three</div>
    <div class="cell">four</div>
    <div class="cell">five</div>
    <div class="cell">six</div>
    <div class="cell">seven</div>
    <div class="cell">eight</div>
  </div>
</figure>

- Ben Aston

Answer 1

使用 flex-wrap: wrap-reverse 替代 flex-wrap: wrap。

* {
  box-sizing: border-box;
  font-size: 0;
  text-align: center;
  line-height: 50px;
}

.bar-chart {
  box-shadow: none;
  height: calc(50px * 3);
  width: calc(50px * 4);
}

.column {
  display: inline-flex;
  width: 100px;
  flex-direction: row;
  flex-wrap: wrap-reverse;  /* ADJUSTED */
  height: 150px;
}

.cell {
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  width: 50px;
  height: 50px;
  font-size: 14pt;
}

<figure class="bar-chart">
  <div class="column">
    <div class="cell">one</div>
    <div class="cell">two</div>
  </div>
  <div class="column">
    <div class="cell">three</div>
    <div class="cell">four</div>
    <div class="cell">five</div>
    <div class="cell">six</div>
    <div class="cell">seven</div>
    <div class="cell">eight</div>
  </div>
</figure>

---

使用 wrap-reverse 时，交叉轴的起点和终点会被交换。

在行方向容器中，这指的是顶部和底部（见下图）。

来自规范：

5.2. 弹性盒子换行：flex-wrap 属性

对于不是 wrap-reverse 的值，交叉轴起点方向等同于当前书写模式的内联起点或块级起点方向（取决于哪个是交叉轴），交叉轴终点方向则是交叉轴起点方向的相反方向。

当 flex-wrap 是 wrap-reverse 时，交叉轴的起点和终点方向被交换。

                                                                                                                       ^来源：W3C

---

在此了解有关沿 主轴 的弹性盒子对齐的更多信息：

• 在 CSS 弹性盒子中，为什么没有 "justify-items" 和 "justify-self" 属性？

在此了解有关沿 交叉轴 的弹性盒子对齐的更多信息：

• flex-wrap 如何与 align-self、align-items 和 align-content 一起工作？

- Michael Benjamin