Html css网格布局的水平滚动

我需要有一个仪表板不同的布局。我只需要水平滚动的布局容器，如果项目超过，以适应在一个可见的视口。我遇到了一个具有以下要求的布局

我使用CSS flexbox创建了布局样式，但无法获得水平滚动，只能获得垂直滚动

html，
身体{
身高：100%；
边际：0px；
}
* {
框大小：边框框；
}
.flexbox{
身高：100%；
宽度：100%；
显示器：flex；
柔性包装：包装；
溢出-x：自动；
背景颜色：浅绿色；
}
.项目{
最小宽度：50%；
最小高度：50%；
弹性：100；
边框：1px实心；
}
.项目：第n个子项（奇数）{
背景颜色：浅蓝色；
}
.项目：第n个子项（偶数）{
背景颜色：浅灰色；
}
.项目1{
最小宽度：100%；
}

1.
2.
3.
4.
5.
6.

尝试将具有此样式的类添加到要在其上进行水平滚动的元素中

display: block;
width: 99%;
overflow-x: auto;

---

对于水平滚动，最简单的解决方案是为每个视图创建一个单独的容器。然后使整个容器（

body

）在行方向上成为flex容器

正文{
显示器：flex；
保证金：0；
}
.flexbox{
弹性：0 100vw；
高度：100vh；
显示器：flex；
柔性包装：包装；
背景颜色：浅绿色；
}
.项目{
弹性：1050%；
最小高度：50%；
边框：1px实心；
}
.项目1{
弹性基准：100%；
}
.项目：第n个子项（奇数）{
背景颜色：浅蓝色；
}
.项目：第n个子项（偶数）{
背景颜色：浅灰色；
}
* {
框大小：边框框；
}

1.
2.
3.
4.
5.
6.

我使用CSS网格布局找到了令人满意的答案

在网格布局中，项目正在收缩以适应布局

在我的问题中，我已经使用

fr

定义了网格线，这就是项目收缩的原因。现在我使用了

%

，因为我希望单元格项从可见区域流出，以便在需要时生成滚动条

定义网格单元区域时的

span

关键字对网格单元的自动放置有很大帮助

来自MDN:

span&[| |]

为网格项的放置提供网格跨度，以便网格项网格区域的相应边与相对边的距离为n行

html，
身体{
身高：100%；
边际：0px；
}
.电网{
显示：网格；
身高：100%；
背景颜色：浅绿色；
网格模板列：重复（2,50%）；
网格模板行：重复（2,50%）；
/*网格间距：5px*/
网格自动列：50%；
网格自动流：列；
}
.项目{
边框：1px实心；
网格面积：跨度1/跨度1；
}
.项目：第n个子项（奇数）{
背景颜色：浅蓝色；
}
.项目：第n个子项（偶数）{
背景颜色：浅灰色；
}
.项目1{
网格面积：跨度1/2；
}

1.
2.
3.
4.
5.
6.

主要技巧是添加

网格自动流：列到容器的显示网格css样式

例如

。容器网格{
显示：网格；
网格间距：1rem；
网格模板列：重复（自动填充，最小值（20rem，20rem））；
网格自动流：列；
溢出-x：自动；
}
我要求
显示：flex或
显示：网格，我知道你说的会有用的。但是，我还想维护容器中的项目的布局。你检查过代码笔了吗？试试overflow-x:scroll…可能有帮助吗？如果它不工作，你能检查一下代码笔吗？对于水平滚动，你需要在父分区中添加任何特定的宽度。@KhushbuVaghela，我在问题中插入了代码段。我已经补充了你所说的。没有用。我猜您正在使用
display:block
对容器进行寻址，但我使用的是
display:flex或grid{{item.text}
`。因此，我不能为每个视图使用单独的容器。