Html 如何让flex网格根据页面大小进行缩放，而不是使用css进行包装

5.30.20编辑：适用于stackoverflows代码段查看器，但不适用于chrome或任何html宿主。以下是托管文件：

不知道发生了什么事

---

这里有一张图片来展示我所说的

所以我是CSS新手，我在谷歌上没有找到很多运气

我有一个媒体查询设置，非常适合移动设备，但我似乎无法在不同大小的显示器上正确显示

在非常宽的屏幕上，它工作良好，显示四列和左侧边栏

然而，随着屏幕缩小，一行显示三幅图像，下一行显示一幅图像

这是我的当前显示和下面的答案

正文{
字体系列：“蒙特塞拉特”；
字号：18px；
}
.身体{
左缘：5%；
保证金权利：5%；
}
.标志{
显示：块；
左边距：自动；
右边距：自动；
宽度：400px高度：90px最大宽度：30%；
}
.英雄{
显示：块；
左边距：自动；
右边距：自动；
最大宽度：100%；
}
.左侧边栏{
显示：无；
}
.行{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}
.栏目{
左缘：1%；
保证金权利：1%；
}
@媒体屏幕和屏幕（最小宽度：1050px）{
.行{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
证明内容：中心；
}
.栏目{
flex:1自动；
}
.集装箱{
显示：网格；
}
.左侧边栏{
网格柱：1；
显示：继承；
}
.产品{
网格柱：2；
}
}

我们的目录


产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元

产品
100美元




退货政策|运输政策|隐私政策|关于我们|我们的事业

我已经配置了flexbox CSS，它应该可以按照您的要求工作。我还为每个

添加了

.row{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
证明内容：中心；
}
.栏目{
flex:1自动；
}

文本
正文

文本
正文

文本
正文

文本
正文

我已经配置了flexbox CSS，它应该可以按照您的要求工作。我还为每个

添加了

.row{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
证明内容：中心；
}
.栏目{
flex:1自动；
}

文本
正文

文本
正文

文本
正文

文本
正文

没错，因为某种原因它不起作用。让我发布我的其余代码。你运行我发布的代码片段了吗？它是否按预期工作？我尝试了，但没有工作，我在上面发布了整个页面的代码。你在

@媒体屏幕和（最小宽度：1050px）

中更改了代码，这意味着它只在屏幕大小大于1050px时运行。尝试在默认CSS中进行更改。此外，还可以通过堆栈溢出将代码发布到堆栈片段中。这样我们就可以运行上面的代码片段来查看结果。我的代码片段可以正常工作，对吗？这就是目标，让它在超过这个宽度的屏幕上运行。移动视图工作得很好。这是wierd，因为某些原因它不工作。让我发布我的其余代码。你运行我发布的代码片段了吗？它是否按预期工作？我尝试了，但没有工作，我在上面发布了整个页面的代码。你在

@媒体屏幕和（最小宽度：1050px）

中更改了代码，这意味着它只在屏幕大小大于1050px时运行。尝试在默认CSS中进行更改。此外，还可以通过堆栈溢出将代码发布到堆栈片段中。这样我们就可以运行上面的代码片段来查看结果。我的代码片段可以正常工作，对吗？这就是目标，让它在超过这个宽度的屏幕上运行。移动视图运行良好。