Question

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

这是我希望页脚显示的样子：

以下是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，那么它可以工作，但是当我使用设备移动设置在浏览器中对其进行测试以查看其在移动设备上的外观时，{{ 1}}属性会使页脚太大，并弄乱了内容。如果取出width和margin-left属性，则页脚如下所示：

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

修改

这是一个摘录，其中摘录了flex-basis和margin-left，并替换为margin-right和display:flex;。确保单击“整页”以使用较大的视口进行查看。

justify-content:space-around;

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;
}

Answer 1

使用justify-content: space-between;可以轻松完成此操作，但是查看您的代码，我觉得您可能会误解Flexbox itself works的用法。您希望页脚充当flex容器，以便您也可以操纵子范围。

考虑签出freeCodeCamp's Flexbox Challenges，以更好地了解Flexbox的工作原理。

编辑：CodePen现在反映了OP模仿的含义。

这里是CodePen to play around with。

这是使页脚既是孩子又是容器。

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

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函数来计算我的padding-left标签的padding-right和<footer>。这就是我的想法（我使用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粘性页脚居中设置的宽度

2 个答案: