html - 使 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>

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 Line Wrapping: the flex-wrap property

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start.

When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

^来源:W3C

---

在此处了解有关沿主轴 flex 对齐的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关沿横轴 flex 对齐的更多信息:

• How does flex-wrap work with align-self, align-items and align-content?