Html 显示：Flex不在其下生成内容

为什么第二栏中的段落出现在标题右侧而不是标题下方？我使用了

display:flex

来对齐中间和中间的内容，但我希望列中的新元素堆叠在前一个元素下

main{
背景：线性梯度（向右，#4b53ff，#9e63ff）；
宽度：100vw；
高度：100vh；
背景尺寸：封面；
}
梅因街{
宽度：65vw；
高度：60vh；
显示器：flex；
文本对齐：居中；
对齐项目：居中；
}
.col1{
背景色：白色；
身高：100%；
边框左上半径：15px；
边框左下半径：15px；
}
.col2{
背景：线性梯度（向右，#7633e5，#178ee0）；
边框右下半径：15px；
边框右上角半径：15px；
身高：100%；
宽度：100%；
}
p{
字体大小：11px；
}

登录
登录
随机航向
Lorem ipsum door sit amet，Concetetur adipising elit，sed do eiusmod temporal incidedut ut
劳工和多洛尔·马格纳·阿利夸。但是，我们必须尽可能少地进行实验
从一个普通的消费品中购买

添加

伸缩方向：列样式到
col2
class

默认的
flex direction
值是
row
，这就是为什么它将它们放在
col2
中的一行中
col1
只有一个元素，这就是为什么您看不到它也是一行。
将其添加到第二个div中：

flex-direction: column;
justify-content: center;

最后一条规则将
div
和
p
居中。
希望有帮助。
当我在代码段中运行您的代码时，我看到
p
位于
h2
下面。但是它们并没有居中，我看到你们使用的类比CSS中显示的要多得多。我已经编辑了它，请再次检查。现在我明白了。让我看看啊，我明白了。谢谢。但将“弹性方向”设置为“列”后，内容不再垂直居中对齐，当您将方向从
行
更改为
列
时，需要将
对齐项目
与
对齐内容
。因此，如果它是
align items:center
，它将是
justify content:center
，反之亦然。我建议您删除align items/justify content类，并将它们用作CSS中的样式，这将使您的代码更干净，更易于使用样式。