有没有一种方法可以让一个项目脱离弹性容器？

Question

有没有一种方法可以让一个项目脱离弹性容器？

4

我正试着遵循一些建议，这些建议涉及不使用边距进行间距设置，而是使用具有列方向和间距属性的 flex 容器。这样做更好，只是我无法找出如何在需要为单个 flex 项设置背景颜色时退出容器。

.container {
  display: flex;
  flex-direction: column;
  max-width: 1130px;
  margin: 20px auto 0 auto;
  gap: 50px;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
}

section {
  font-size: 50px;
}

footer {
  font-size: 25px;
  background: lightgray;
}

<html>
  <body>
    <div class='container'>
      <header>
        <span>title text</span>
        <nav>
          <button>button link 1</button>
          <button>button link 2</button
        </nav>
      </header>
      <section>main content</section>
      <footer>
        Footer content.
        <br />
        How do i get this background color to stretch beyond the flex container to the edge of the screen?
        <br />
        I can remove the max-width+margin from the container and apply them instead to the children (header, section), then maybe do an align-items on the container, but then I can't get the header to look like it does right now.
      </footer>
    </div>
  </body>
</html>

- rizingfit

我认为您可以通过将页脚内容放入一个CSS定位属性设置为absolute或relative的容器中，创建一个新的相对定位视图堆栈。这就是我所说的"breaking out"。 - lupz

嗯，刚才这里有几个人给出了一些有用的回复，但现在似乎已经被删除了。我第一次使用这个网站（发布问题），但它似乎有点出错了。 - rizingfit

@rizingfit 在Stack Overflow上，评论可能随时被管理员、评论作者或其他非管理员用户的足够多的举报删除，它们在这里是“短暂的”。如果你认为某个评论非常有用，希望其内容保留下来，可以截图或将内容复制到一个回答或问题的正文中（适当的地方）；这是确保评论内容长久存在的唯一方式。很可能评论的作者（或管理员）认为这些内容不再需要（可能是在编辑问题后），所以将其删除了。 - TylerH

3个回答

0

页脚受容器的最大宽度限制。虽然可能有办法突破这个限制，但我认为最好一开始就移除这个限制会更合理。

在下面的示例中，我将最大宽度应用于标题和各个部分，这样页脚就可以扩展到页面的边缘。（我去掉了正文的边距，只是为了演示它能够延伸到边缘）。你提到这样做并没有得到你想要的标题，但我认为如果将标题的宽度设置为100%，它看起来与你的示例相同。

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

header, section {
  max-width: 1130px;
  margin: 20px auto 0 auto;
  width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
}

section {
  font-size: 50px;
}

footer {
  font-size: 25px;
  background: lightgray;
}

<html>
  <body>
    <div class='container'>
      <header>
        <span>title text</span>
        <nav>
          <button>button link 1</button>
          <button>button link 2</button
        </nav>
      </header>
      <section>main content</section>
      <footer>
        Footer content.
        <br />
        How do i get this background color to stretch beyond the flex container to the edge of the screen?
        <br />
        I can remove the max-width+margin from the container and apply them instead to the children (header, section), then maybe do an align-items on the container, but then I can't get the header to look like it does right now.
      </footer>
    </div>
  </body>
</html>

- dashingdove

这个问题是，虽然我以页脚作为例子，但页面的主要内容中还有各种<section>元素，也需要像页脚一样分离出来。 - rizingfit

你可以更改CSS，只应用于特定的部分。例如，给你想要/不想要“突出显示”的部分添加一个类。 - dashingdove

0

使用负的margin值和正的padding值：

body {
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 1130px;
  margin: 20px auto 0 auto;
  gap: 50px;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
}

section {
  font-size: 50px;
}

footer {
  font-size: 25px;
  background: lightgray;
  margin: -25px -1000vw; /* ⇐ */
  padding: 25px 1000vw; /* ⇐ */
}

<div class="container">
  <header>
    <span>title text</span>
    <nav>
     <button>button link 1</button>
     <button>button link 2</button>
    </nav>
  </header>
  <section>main content</section>
  <footer>
    Footer content.
    <br />
    How do i get this background color to stretch beyond the flex container to the edge of the screen?
    <br />
    I can remove the max-width+margin from the container and apply them instead to the children (header, section), then maybe do an align-items on the container, but then I can't get the header to look like it does right now.
  </footer>
</div>

- imhvost

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Behemoth · Accepted Answer

一种可能的解决方案是将您的

容器拉伸到屏幕边缘，方法是应用width: 100vw;使

水平填满整个屏幕，并使用align-self: center;将元素相应地定位在屏幕中央，以防止任何溢出问题。

附注：我调整了.container的max-width，这样您可以看到片段中标题和主要内容的布局没有改变。

.container {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  margin: 20px auto 0 auto;
  gap: 50px;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
}

section {
  font-size: 50px;
}

footer {
  font-size: 25px;
  background: lightgray;
  width: 100vw;
  align-self: center;
}

<html>
  <body>
    <div class='container'>
      <header>
        <span>title text</span>
        <nav>
          <button>button link 1</button>
          <button>button link 2</button
        </nav>
      </header>
      <section>main content</section>
      <footer>
        Footer content.
        <br />
        How do i get this background color to stretch beyond the flex container to the edge of the screen?
        <br />
        I can remove the max-width+margin from the container and apply them instead to the children (header, section), then maybe do an align-items on the container, but then I can't get the header to look like it does right now.
      </footer>
    </div>
  </body>
</html>