无法在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

您必须将p的{​​{1}}设置为width并设置其父项100%，否则flex-wrap: wrap和h1将缩小适合。

p

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

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

p {
  width: 100%;
}

您还可以使用<div> <h1>Line One</h1> <p>Line Two</p> </div>和.breaker创建一个width: 100%：

display: block

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

.wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breaker {
  width: 100%;
  height: 0;
  display: block;
} 

Answer 2

添加flex-direction：column;在父div中