时间戳

首页 > 解决方案 > Flexbox wrap 不适用于多个子 div

html - Flexbox wrap 不适用于多个子 div

问题描述

我正在尝试flex: wrap;在两个 div 上使用，但它似乎只适用于第一个 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>

标签： htmlcssflexbox

解决方案

我认为你想要的是每个弹性项目都在彼此之上？您可以像这样设置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;
}
<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>

推荐阅读