Javascript 在桌面之间的空间，堆叠在手机上如何？

目前我正在使用flex和

justify content:center和B组件上的左侧填充。这是一次临时的黑客攻击。如何才能正常工作

当容器大时，我希望它们是中心的，但中间有一个空间。小的时候，我想让它们在一起

注:


在大屏幕上，两个项目居中，两个项目之间有间隙
不应基于屏幕大小，因为包装器在桌面上可能很小
没有组件媒体查询这样的JS解决方案

其中一个解决方案可能是这样的：但是使用JS


媒体查询无法工作，因为

为什么不简单地使用媒体查询以较小的宽度交换到，并将
B
的边距从交换到

这可以在下面的示例中看到

（点击“运行代码段”，然后点击“整页”查看并列视图）：


.container{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
a.b{
宽度：300px；
高度：100px；
边框：1px纯黑；
}
.b{
左边距：20px；
}
@媒体屏幕和屏幕（最大宽度：768px）{
.集装箱{
弯曲方向：立柱；
}
.b{
左边距：0；
边缘顶部：20px；
}
}

A.
B
只需使用引导程序的列即可。他们根据屏幕大小调整内容大小您尝试了哪些代码？您当前的CSS和HTML是什么？您是否将它们堆叠在特定的屏幕宽度？如果是，您可以为间隙设置一个CSS类，该类仅适用于该屏幕大小。请共享您当前的代码，至少有一部分您尝试过使用media query？因为包装器在大屏幕上可能很小。然后使用基于视口大小而非像素的单位，例如
vw
。这仍然无法解决此问题。根据页面上的其他元素，父包装可以有两种不同的大小。
vw
解决方案没有帮助。@Totty.js——因此您有一个可以很小的包装器。。。取决于其他因素？如果只使用固定的媒体查询断点和基于百分比的flex度量，我看不出这有什么区别。如果您在一个示例中展示您的代码，清楚地说明所有约束和注意事项，那么我会更好地理解您。但据我所知，我的代码完全模拟了您的问题图表。我添加了一个屏幕截图，我将做一个示例。