Question

我只是在进行一些响应式Web设计实践，但我不明白我在页脚中错了什么，所以我有一个flexbox #footer，宽度设置为100vw，第二个div宽度为900像素的容器，但是此宽度不是Web浏览器中正在显示的内容吗？可能确实很基本，但是已经让我感到困惑的时间已经太久了！完整笔如下：

https://codepen.io/rickwall/pen/WNNmERN

#footer {
  width: 100vw;
  height: 150px;
  background-color: #3b505b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-container {
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: ;
}

<section id="footer">
  <div class="footer-container">
    <div class="footer-menu">
      <ul>
        <li><a href="#">Brands</a></li>
        <li><a href="#">Availability</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
    <div class="links">
      <a href="https://github.com/" id="profile-link" target="_blank"><i class="fab fa-github"></i></a>
    </div>
    <div class="form-container">
      <form class="" action="index.html" method="post">
        <input type="text" name="Name" value="Name" required>
      </form>
    </div>
  </div>
</section>

谢谢大家

Answer 1

我有第二个div容器，其宽度为：900px

实际上，它具有max-width: 900px，这是非常不同的。如果自然宽度超过 900，则只会强制使用900。

由于display: flex元素的子元素将仅达到适合其内容所需的宽度，因此除非您告知（或如果您用足够的内容填充），否则它将永远不会超过900。

为此，除了您的flex: 1以外，还要应用width: 100%（或max-width）。

#footer {
  width: 100vw;
  height: 150px;
  background-color: #3b505b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-container {
  flex: 1;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
}

<section id="footer">
  <div class="footer-container">
    <div class="footer-menu">
      <ul>
        <li><a href="#">Brands</a></li>
        <li><a href="#">Availability</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
    <div class="links">
      <a href="https://github.com/" id="profile-link" target="_blank"><i class="fab fa-github"></i></a>
    </div>
    <div class="form-container">
      <form class="" action="index.html" method="post">
        <input type="text" name="Name" value="Name" required>
      </form>
    </div>
  </div>
</section>

之所以可行，是因为flex: 1是指该项目应占用的剩余空间的比例。例如，如果您有两个孩子，每个孩子都有flex: 1，则两个孩子都会长大以分割剩余的空间。如果您有两个孩子，一个带有flex: 2，另一个带有flex: 1，则它们将分别占剩余空间的三分之二和三分之一。

页脚宽度不符合预期

1 个答案: