以下 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>代替flex-wrap: wrap, use 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>With wrap-reverse交叉起点和交叉终点方向互换。
在行方向容器中，这是指顶部和底部（见下图）。
从规格来看：
5.2.柔性线缠绕：flex-wrap财产
对于不存在的值
wrap-reverse, 交叉起始方向 相当于内联开始或块开始方向 当前的写入模式（以横轴中的为准）和 cross-end 方向与 cross-start 方向相反。When
flex-wrapiswrap-reverse，交叉起点和交叉终点 方向交换了。
Source: W3C
了解有关沿线弯曲对齐的更多信息主轴 here:
了解有关沿线弯曲对齐的更多信息交叉轴 here: