代码之家 › 专栏 › 技术社区 › Mona Coder

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

flexbox css3 css

0

Mona Coder · 技术社区 · 5 年前

我正在做这个演示。为什么我不能发送 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>

2 回复 | 直到 5 年前

1

Hai Pham 5 年前

你必须设置 p 的 width 到 100% 并设置其父级 flex-wrap: wrap ,否则 h1 和 磷 会收缩到合适的尺寸。

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;
}

<div class="wrapper">
  <h1>Line One</h1>
  <div class="breaker"></div>
  <p>Line Two</p>
</div>

2

0

Varun 5 年前

添加灵活方向:列;在父分区中