css - 无法将第二个元素发送到 flex 显示中的下一行

Question

我正在制作这个演示。为什么我无法将 p 发送到 flex 内容的第二行？

body,
html {
  height: 100%;
  width: 100%
}

div {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
}

<div>
  <h1>Line One</h1>
  <br />
  <p>Line Two</p>
</div>

Answer 1

添加 flex 方向:列；在父 div 中