个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 14:54:29 25 4
gpt4 key购买 nike

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

这是我希望页脚的外观: enter image description here

下面是 flexbox 是如何影响它的: enter image description here 

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 属性，那么我的页脚看起来像这样: enter image description here

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

编辑

这是一个片段，其中 margin-left 和 margin-right 被取出并替换为 display:flex; 和 justify -内容:周围空间；。请务必单击“全页”以使用更大的视口(viewport)查看。

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>

最佳答案

这可以通过 justify-content: space-between; 轻松完成, 但看看你的代码，我觉得你可能有点误解 Flexbox itself works .您希望页脚充当 flex 容器，以便您也可以操纵子 span。

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

编辑:CodePen 现在反射(reflect)了 OP 的意思是模仿。

这是一个 CodePen to play around with .

这样做的目的是使您的页脚既是子又是容器。

  1. 首先，您的正文成为一个容器，让主要内容增长以填充将页脚推到页面底部的空间。 flex-direction设置为 column垂直流动。
  2. 您为页脚创建了一个包装器，因为目前您的页脚位于 body 中设置为 flex-direction:column; 的容器在这种情况下，您希望方向为 row水平样式。默认 display:flex;会假设你想要 row所以方向不需要声明。然后我们justify-content到中心，所以无论页脚本身的宽度如何，都将居中。
  3. 您善待您的 <footer>作为 child 和容器。作为一个 child ，我们告诉它不要变大或变小，并将基础设置为 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>

关于html - 如何以设置的宽度居中 flexbox 粘性页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51217564/

25 4 0
文章推荐： css - 这个 IE8 错误的任何解决方法？
文章推荐： html - 如何在最小化的同时保持视频的完整尺寸？
文章推荐： internet-explorer - Internet Explorer CSS 位置问题
文章推荐： javascript - 唯一 id ，D3 中生成的矩形的 id 名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com