Html Flexbox是否可能具有响应列？

我希望在网页中有一个区域，该区域响应性地进行包装，但在列中受到约束。我试图模仿在Microsoft Windows资源管理器中看到的行为-右侧窗格以小图标模式显示文件

Windows行为示例

显示柔性包装但未约束到列中的代码段

.集装箱{
显示器：flex；
柔性包装：包装；
}
.项目{
背景色：红色；
利润率：10px；
}
一些文本
一些文本asdf
一些文本是asdfasdf
一些文本是asdfasdfasdfasdfasdf
一些文本asdf
一些文本是asdfsd
一些文本weqrqwerqw
A.
aaa
AAAA
aa
一些文本
一些文本

只需使用flex basis属性并减去左右两侧的填充大小即可。对于使用媒体查询的较低设备，将flex基础增加到50%到100%

.集装箱{
显示器：flex；
柔性包装：包装；
}
.项目{
背景色：红色；
弹性基础：计算（33.3333%-20px）；
填充：10px；
}
一些文本
一些文本asdf
一些文本是asdfasdf
一些文本是asdfasdfasdfasdfasdf
一些文本asdf
一些文本是asdfsd
一些文本weqrqwerqw
A.
aaa
AAAA
aa
一些文本
一些文本

您正在寻找：

.item{
flex:0210px；
文本溢出：省略号；
溢出x：隐藏；
空白：nowrap；
}

。。。其中

210px

是您所需的项目宽度

.container{
显示器：flex；
柔性包装：包装；
}
.项目{
背景色：红色；
利润率：10px；
flex:0210px；
文本溢出：省略号；
溢出x：隐藏；
空白：nowrap；
}

一些文本
一些文本asdf
一些文本是asdfasdf
一些文本是asdfasdfasdfasdfasdf
一些文本asdf
一些文本是asdfsd
一些文本WeqrqWerqw这不会换行。。。
A.
aaa
AAAA
aa
一些文本
一些文本

我们可以使用

flex-basis:33.333%

（3列），然后使用

文本溢出：省略号

和

溢出：隐藏

，以及

空白：nowrap

，来实现这一点：

像这样：

.container{
显示器：flex；
柔性包装：包装；
}
.项目{
背景色：红色；
弹性基准：33.33%；
框大小：边框框；
右边填充：10px；
文本溢出：省略号；
溢出：隐藏；
空白：nowrap；
}

一些文本
一些文本asdf
一些文本是asdfasdf
一些文本是asdfasdfasdfasdfasdf
一些文本asdf
一些文本是asdfsd
一些文本weqrqwerqw
A.
aaa
AAAA
aa
一些文本
一些文本

在这个答案中使用JSFIDLE——我注意到容器有3列向下响应（这意味着如果没有足够的空间，它会进入2列，甚至1列），但不会向上响应（这意味着如果我将容器拉伸得更宽，我只会得到3列，而项目本身也会拉伸——即使有空间容纳额外的列）。如何在容器拉伸时动态添加列？只需使用媒体查询指定列数。如图所示，当面板收缩时，列会受损。这是一个非常有希望的答案。几点。在示例1中，列锁定在210px处。如果我有一个非常小的文本项目大集合，将有大量的浪费空间。在示例2中，列不受最后一行的限制（）@barrypicker我在第二个示例中添加了

@media

查询。您更新的第二个示例似乎运行得非常好。我找不到任何抱怨。谢谢你的建议…@巴里：既然你在寻找投诉，我有一个问题：我无法确定你的研究工作和/或编码尝试。干杯，快乐编码！：）。别介意我。只是开玩笑。请注意，我刚刚用实际更改的属性替换了速记，因此更清楚发生了什么。@Andrei-如果我被认为是直言不讳或忘恩负义，我向您道歉。非常感谢您的回答，效果非常好。我想我的期望太高了。我已经为这个目标研究Flexbox策略两天了。我见过很多例子，人们可能会说这已经足够好了，但我不想寻找更好的解决方案。大多数示例显示“项目”的大小完全相同。在我看来，“item”的大小很少相同，这会导致列问题。无论如何，再次感谢您…3列始终不是windows资源管理器的行为方式。它是响应性的，如果5列匹配，它将使用5列。当窗口缩小时，它的响应是减少列数。@barrypicker I添加了另一个响应宽度的解决方案，以便在可能的情况下添加/删除列。使用Flexbox，例如，如图中所示，项目从左向右流动。这意味着您可以动态地获得每行相等的高度，但不能获得每列相等的宽度。为此，您需要一个脚本，或者使用media query创建断点。如果使用具有柱方向（从上到下）的Flexbox，则相反。此外，由于Flexbox在向列方向包装时存在一些问题，CSS列可能会做得更好，所以底线是，唯一一种在两个方向都有效的技术是CSS网格，所以请选择……此外，由于Windows资源管理器不局限于某一技术，而是试图以最佳方式完成其工作，你为什么要这么做。由于Flexbox目前有更好的支持，我会继续使用它，并添加一个小脚本来处理它不能处理的小事情……哪种类型的脚本用一个“是的，有一些帮助”@LGSon-这是一个合理的请求-混合技术来获得所需的体验，从而回答了“Flexbox是否有可能拥有响应性专栏？”的问题。我想这个问题的重点是确定混合。如果Flexbo