Question

以下HTML和CSS会创建一个＆＃34;条形图＆＃34;。但图表列从上到下增长。我怎样才能让它们从下到上成长？

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 1

而不是flex-wrap: wrap，请使用flex-wrap: wrap-reverse。

* {
  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

对于非wrap-reverse的值，交叉开始方向   相当于inline-start或block-start方向   当前的书写模式（以十字轴为准）和   交叉方向是交叉开始的相反方向。

当flex-wrap为wrap-reverse时，交叉启动和交叉结束   方向被交换。

^来源：W3C

在此处了解有关主轴的柔性对齐的更多信息：

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

在此处了解有关十字轴的柔性对齐的更多信息：

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

使柔性项目从下到上

1 个答案: