Flex items lining up in a row (inline) but should stack vertically

Question

I'm using flexbox to center the text in my div but that seems to make it so that the two lines of text, which are both p tags, aren't displaying with normal block properties (i.e. they are smooshing onto the same line instead of stacking, which is the desired result).

I am open to either removing flexbox, if I can get the text (the two p tags) within the div to align both vertically and horizontally or keeping flex and getting the p tags to each take up the full width of the div, like a block element.

The "my name is" part should be on top of the actual name:

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

There are a few small problems.

You are using the compound property flex-flow, which lets you specify both the flex-direction and flex-wrap values in one rule (the same way you can say border: 1px solid black;). Now, the value you have here is row-wrap, which is actually being ignored because it's not a valid value (it would be row wrap -- one value for direction, one for wrap mode).

But! You don't want row anyway. Row layout is default, which is why you're getting the first item to the left of the second. You want column. You can set this by either using flex-direction: column or flex-flow: column wrap (assuming you want wrapping to be possible).

Final note: you also set flex-flow and display: flex on the child elements. These rules both pertain to an element with flex children. If these elements are really just going to be <p> tags, you only need them on the .nametag ('flex parent') selector.