Flexbox包装不适用于多个子div

Question

我试图在两个div上使用flex: wrap;，但似乎只在第一个div上起作用。为什么是这样？我知道我可以将所有内容都放在一个div中，但是我希望将所有内容都整理好。

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

<div class="header">
  <div class="server-info">
    <div class="name">My Server</div>
    <div class="desc">This is the description</div>
  </div>

  <div class="links">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
  </div>
</div>

Answer 1

我认为您想要的是每个flex项都可以彼此重叠吗？您可以将./python -m pip install opencv_python 设置为flex-direction到两个容器，如下所示：

column

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

.links {
  display: flex;
  flex-direction: column;
}

.server-info {
  display: flex;
  flex-direction: column;
}

Answer 2

我相信以下是您所追求的。我已经做了两件事：

• 在标题内的两个div周围添加了一个容器div。现在，flexbox具有一个将垂直和水平居中放置的元素
• 使两个容器的宽度均为100％

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
  color: white;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('https://d31qu3dhiv8md1.cloudfront.net/images/rust-leaves-early-access-1516667234.jpg');
  background-size: cover;
  height: 100vh;
}

.server-info,
.links {
  width: 100%;
}

<div class="header">
  <div>
    <div class="server-info">
      <div class="name">My Server</div>
      <div class="desc">This is the description</div>
    </div>

    <div class="links">
      <a href="#">Link1</a>
      <a href="#">Link2</a>
    </div>
  </div>
</div>