如何以设置的宽度居中 flexbox 粘性页脚

Question

我正在使用 flexbox 使我的页脚固定在底部，并且在大多数情况下都可以正常工作。我的问题是，我需要内容在指定的宽度内，我用 max-width 设置并用 margin-left:auto; 和 margin-right:auto; 居中。当我激活 flexbox 时，内容被 margin-left 和 margin-right 规则压缩，并且不占用 max-width 定义的 space。我想知道为什么会这样，以及如何让我的页脚看起来像我想要的样子。

这是我希望页脚的外观：

下面是 flexbox 是如何影响它的：

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

div#content {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  max-width: 67.5rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.875rem;
  padding-top: 3.5rem;
}

<body>
  <header>...</header>
  <div id="content">...</div>
  <footer>
    <span id="left">left text</span>
    <span id="mid">right text url@mail</span>
    <span id="icons">...</span>
  </footer>
</body>

如果我将 max-width 更改为 width 那么它就可以工作，但是当我使用设备移动设置在我的浏览器中测试它以查看它在移动设备上的外观时， width 属性使页脚太大而弄乱了内容。如果我取出 margin-left 和 margin-right 属性，那么我的页脚将如下所示：

如您所见，它不再居中。我不能使用 flex-basis 属性因为它只会影响页脚的高度。请帮忙。

编辑

这是一个片段，其中 margin-left 和 margin-right 被取出并替换为 display:flex; 和 justify-content:space-around;。请务必单击 "Full page" 以使用更大的视口查看。

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

div#content {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  max-width: 67.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.875rem;
  padding-top: 3.5rem;
  display: flex;
  justify-content: space-around;
}

<body>
  <header>...</header>
  <div id="content">...</div>
  <footer>
    <span id="left">left text</span>
    <span id="mid">right text url@mail</span>
    <span id="icons">...</span>
  </footer>
</body>

Answer 1

这可以用 justify-content: space-between; 轻松完成，但看看你的代码，我觉得你可能有点误解 Flexbox itself works。您希望页脚充当弹性容器，以便您也可以操纵 child 跨度。

考虑查看 freeCodeCamp's Flexbox Challenges 以更好地了解 Flexbox 的工作原理。

编辑：CodePen 现在反映了 OP 模仿的意思。

这是 CodePen to play around with。

这样做是让您的页脚既是 child 又是容器.

首先，您的正文成为一个容器，允许主要内容增长以填充 space 将您的页脚推到页面底部。 flex-direction 设置为 column 垂直流动。
您为页脚创建了一个包装器，因为目前您的页脚位于 body 容器中，该容器设置为 flex-direction:column;，在这种情况下，您希望方向为 row 水平样式。默认情况下 display:flex; 会假定您想要 row，因此不需要声明方向。然后我们 justify-content 到中心，所以无论页脚本身的宽度如何，都将居中。
您将 <footer> 视为 child 和容器。作为 child，我们告诉它不要增长或收缩，并将基础设置为 auto。作为一个容器，我们告诉它分配 space-between 它的 children 这允许在左右跨度之间始终等量的 space。

body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  justify-content: center;
}

footer {
  flex: 0 0 auto;
  display: flex;
  margin: 1em;
  width: 80%;
  border: 1px solid #000;
  justify-content: space-between;
}

<body>
  <div class="main">
    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>
    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>

  </div>
</body>
<div class="wrapper">
  <footer>
    <span id="left">left text</span>
    <span id="mid">right text url@mail</span>
  </footer>
</div>

Answer 2

我放弃了让这个与 flexbox 居中的尝试。相反，我使用 calc 函数来计算 <footer> 标签的 padding-left 和 padding-right。这是我想出的（我使用 47.5rem 而不是 67.5rem 因为我认为它更容易看到行为）。

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

div#content {
  flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: calc(((100vw - 47.5rem)/2) + 1.25rem);
  padding-right: calc(((100vw - 47.5rem)/2) + 1.25rem);
  padding-bottom: 1.875rem;
  padding-top: 3.5rem;
}
#left {
  flex: 1;
  order: 1;
}
#mid {
  flex: 0 0 auto;
  order: 2;
}
#icons {
  order: 3;
}

<body>
  <header>...</header>
  <div id="content">...</div>
  <footer>
    <span id="left">left text</span>
    <span id="mid">right text url@mail</span>
    <span id="icons">...</span>
  </footer>
</body>

如何以设置的宽度居中 flexbox 粘性页脚

How to center flexbox sticky footer with a set width

html

css

footer

flexbox