Html 如何创建反向flex行的水平可滚动flex列？

我想创建一个水平可滚动的flex列，其中包含多个flex行，但是每一行我想以相反的方式显示。i、 e.1,2,3,4,5,6显示为6,5,4,3,2,1

以下是我尝试的一部分：

如您所见，水平滚动条消失

HTML:

我希望有两行的水平滚动列，显示6,5,4,3,2,1（即相反顺序），其中每个div都是display:flex

如您所见，水平滚动条消失

这是因为您忽略了让flex项目包装，所以两个“行”都显示在一行上

添加

flex-wrap:wrap到
。列
，以便在需要时允许元素换行：

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}

如您所见，水平滚动条消失

这是因为您忽略了让flex项目包装，所以两个“行”都显示在一行上

添加
flex-wrap:wrap到
。列
，以便在需要时允许元素换行：

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}

使用这种代码格式


.column{
显示器：flex；
溢出：自动；
柔性包装：包装；
弯曲方向：立柱；
}
.行{
显示器：flex；
弯曲方向：行反向；
柔性包装：nowrap；
}
.盒子{
显示器：flex；
背景：红色；
保证金：2倍；
最小宽度：200px；
最小高度：50px；
填充物：5px；
颜色：白色；
}

1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
使用此代码格式


.column{
显示器：flex；
溢出：自动；
柔性包装：包装；
弯曲方向：立柱；
}
.行{
显示器：flex；
弯曲方向：行反向；
柔性包装：nowrap；
}
.盒子{
显示器：flex；
背景：红色；
保证金：2倍；
最小宽度：200px；
最小高度：50px；
填充物：5px；
颜色：白色；
}

1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
“正如您所看到的，水平滚动条消失了。”-因为您忽略了让flex项目包装，所以两个“行”都显示在一行上。添加
flex-wrap:wrap
到
.column
“正如您看到的那样，水平滚动条消失了。”-因为您忽略了让flex项目包装，所以两个“行”都显示在一行上。添加
flex-wrap:wrap至
列
.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}