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

【问题标题】：Display: Flex not producing content under it显示：Flex 不在其下生成内容
【发布时间】：2019-08-06 03:57:24
【问题描述】：

为什么第二列中的段落出现在标题的右侧而不是其下方？我使用display: flex 将内容居中对齐，但我希望将列中的新元素堆叠在前一个元素之下。

main{
    background: linear-gradient(to right, #4b53ff, #9e63ff);
    width: 100vw;
    height: 100vh;
    background-size: cover;
}
main .row{
    width: 65vw;
    height: 60vh;
    display: flex;
    text-align: center;
    align-items: center;
}
.col1{
    background-color: white;
    height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    
}
.col2{
    background: linear-gradient(to right, #7633e5, #178ee0);
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    height: 100%;
    width:  100%;
}
p{
  font-size:11px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <main class="d-flex align-items-center ">
        <div class="container d-flex justify-content-center">
            <div class="row ">
                <div class="col-lg-4  col-md-4 col-sm-4 col1  d-flex align-items-center justify-content-center">
                    <h2 class="block">login</h2>

                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col2 d-flex align-items-center ">
                    <h2 class="d-block justify-content-center">Random heading</h2>
                    <p class="d-block justify-content-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. </p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

【问题讨论】：

当我在 sn-p 中运行您的代码时，我看到 p 位于 h2 下方。但是它们没有居中，而且我看到您使用的类比 CSS 中显示的要多。
我已经编辑过了，请再检查一下。
现在我明白了。让我看看

标签： html css flexbox bootstrap-4

【解决方案1】：

将flex-direction: column; 样式添加到col2 类。

默认flex-direction 值为row，这就是为什么它将它们放在col2 中的一行。 col1 只有一个元素，所以你看不到它也是一行。

【讨论】：

啊，我明白了。谢谢。
但是将flex方向设置为column后，内容不再垂直居中对齐，
当您将方向从row 更改为column 时，您需要将align-items 与justify-content 交换。因此，如果是 align-items: center，它将是 justify-content: center，反之亦然。
我建议您删除 align-items/justify-content 类并将它们用作 CSS 中的样式，这将使您的代码更清晰，并且更容易使用样式。

【解决方案2】：

将此添加到您的第二个 div：

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

最后一条规则将div 和p 居中。希望对您有所帮助。

【讨论】：