css - flex 元素排成一行(内联)但应垂直堆叠

Question

我正在使用 flexbox 将文本居中放置在我的 div 中，但这似乎使得两行文本(它们都是 p 标签)不是不显示正常的 block 属性(即它们在同一行上滑动而不是堆叠，这是期望的结果)。

如果我可以让 div 中的文本(两个 p 标签)垂直和水平对齐，或者保持 flex 和让每个 p 标签占据 div 的整个宽度，就像一个 block 元素。

“我的名字是”部分应该在真实姓名之上:

HTML:

<div class='nametag' id='bernie'>
    <p class='hello'>Hello, my name is</p>
    <p class='name'>Bernie</p>
</div>
<div class='nametag' id='carly'>
    <p class='hello'>Hello, my name is</p>
    <p class='name'>Carly</p>
</div>

CSS:

.nametag {
    border: 2px solid red;
    height: 6em;
    width: 10em;
    color: red;
    background-color: white;
    bottom: 30%;
    position: absolute;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;

    flex-flow: row-wrap;
}

.hello {
    font-size: .7em;
    display: flex;
    flex-flow: row-wrap;
    width: 5em;
}

.name {
    font-size: 1.2em;
    display: flex;
    flex-flow: row-wrap;
    width: 5em;
}

Answer 1

有几个小问题。

您正在使用复合属性 flex-flow ，它允许您同时指定 flex-direction和 flex-wrap一个规则中的值(就像你说 border: 1px solid black; 一样)。现在，这里的值为 row-wrap ，它实际上被忽略了，因为它不是一个有效值(它将是 row wrap —— 一个方向值，一个环绕模式值)。

但是!你不想要 row反正。行布局是默认的，这就是您将第一项放在第二项左侧的原因。你要column .您可以使用 flex-direction: column 来设置它或 flex-flow: column wrap (假设您希望包装成为可能)。

最后注意:您还设置了 flex-flow和 display: flex在子元素上。这些规则都适用于具有 flex children 的元素。如果这些元素真的只是<p>标签，你只需要在 .nametag 上使用它们('flex parent') 选择器。