Html flex flow不'；t将我的3个元素放在列中，元素保留在默认行中？ 我从显示切换到：网格；显示：flexbox；因为我的三个专栏的设计选项。

我希望我的专栏如下所示：

• 桌面视口： 3列相邻
• 平板电脑视口： 第1行有2列，第2行有1列（在第2行的中心），类似于Y形
• 移动视口： 所有3列在3行中相互下方

问题是： flex flow：列换行不会将我的元素放在列中，而是保留在行中

.grid容器{
显示器：flex；
利润率：100px 100px；
宽度：400px；
高度：800px；
柔性流：柱包裹；
}
.grid容器.column{
背景色：#9c1f0a；
文本对齐：居中；
填充：20px0；
字体大小：30px；
边界半径：20px；
}

专栏1
专栏2
第3栏

我对您的代码做了一些更改。 首先，从容器中取出

宽度

和

高度

。另外，删除

flex-flow

属性。现在添加

flex wrap:wrap

，由于此属性，它将在新行中包装项目。同时添加

justify content:center

，这将使元素在水平轴上居中对齐

我还添加了

flex:0200

，这意味着该项目不会增长和收缩，并且始终具有200px的宽度

如果您希望更改宽度，可以为每个项目指定不同的flex属性，而不是200px，您可以编写不同的值，可以这样说：

#左{
flex:0100px；
}
#居中{
flex:00200px；
}
#对{
flex:0300px；
}

我相信这就是你想要的：

.container{
显示器：flex；
保证金：0自动；
柔性包装：包装；
证明内容：中心；
}
.container.column{
背景色：#9c1f0a；
文本对齐：居中；
填充：20px0；
字号：1rem；
边界半径：20px；
flex:00200px
}

专栏1
专栏2
第3栏

它是

显示：flex

不是

flexbox

；）这确实是我的错误。但它仍然不起作用吗？您是否希望在一行中显示3列，然后使用flex-flow:row-wrap；这是用于移动视口的。但是对于桌面，我需要flex-flow:column-wrap；当内容达到您设置的800px高度时，它也会自动换行，只要有足够的空间，它就不会换行到另一列；）