我的弹性无序列表上的“证明内容”不起作用

Question

我有一个简单的 Flexbox 页脚。当屏幕低于 580 像素时，布局会发生变化，如下所示。

我有两个主要问题：

1. <ul> 上的 justify-content 属性似乎没有起作用。如果我将 <ul> 设置为 display: flex 项目，那么子元素肯定应该是弹性项目，不是吗？在页脚的移动版中，<li> 项始终停留在右侧。

2. 为什么右侧容器（切换到移动视图的底部项目）的高度比其在移动设备尺寸下的同级容器大得多？此项目没有添加额外的填充或高度值。

** 注意 - 我在每个元素周围放置了一个 1px 的边框，以便更容易看到正在发生的事情。

* {
  border: 1px solid black;
}

body {
  margin: 0;
  padding: 0;
}

footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: red;
  box-sizing: border-box;
  padding: 1rem;
}

.footer-inner {
  background: blue;
  width: 30%;
  display: flex;
  align-items: center;
  padding: 1rem;
  color: white;
}

#footerright {
  display: flex;
  justify-content: flex-end;
}

#footerright ul {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}

#footerright ul li {
  padding: 0px 10px;
  color: white;
}

@media screen and (max-width: 580px) {
  footer {
    flex-direction: column;
    align-items: center;
  }
  .footer-inner {
    justify-content: center;
    min-width: 240px;
  }
  #footerright {
    justify-content: center;
  }
  #footerright ul {
    justify-content: center;
  }
}

<footer>
  <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div>
  <div class="footer-inner" id="footerright">
    <ul>
      <li id="facebook">Twi</li>
      <li id="instagram">Fac</li>
      <li id="twitter">Ins</li>
    </ul>
  </div>
</footer>

View on CodePen

Answer 1

为什么右侧容器的高度比它的大得多 手机大小的兄弟姐妹？

因为在non-mobile size时，flexrow items的align-items的默认值，即stretch，使同一行的items等高，这不是包装时的情况，或使用 flex column 方向，它们会根据边距、边框、填充和内容折叠到自己的高度。

在这种情况下，如果您从 ul 中删除预设的填充/边距，它将折叠到 li 的大小，它们看起来具有相同的高度，尽管基于例如不同的字体大小等，它们可能会再次变得不相等。

---

Flexbox“对齐内容”不起作用

margin/padding 重置 (ul {margin: 0; padding: 0;}) 还将处理 ul 在移动和非移动视图中遭受的小左偏移，尽管在移动视图中它更明显，我也猜想你的意思是 justify-content 似乎没有起作用。

Answer 2

关于移动视图中的“右对齐”：将padding-left: 0; 添加到ul 以避免uls 的默认填充会导致从中心位置水平偏移。

关于第二个容器的大小：将padding: 0 添加到.footer-inner 和margin: 0 到#footerright ul 以重置默认填充和边距：

https://codepen.io/anon/pen/GOQwBV

Answer 3

您可以通过添加基本的 CSS 浏览器重置（等高问题）并将#footerright > ul 中的justify-content: center 属性替换为align-items: center 来解决您的问题

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid black;
}

html, body {
  width: 100%;
}

footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: red;
  box-sizing: border-box;
  padding: 1rem;
}

.footer-inner {
  background: blue;
  width: 30%;
  display: flex;
  align-items: center;
  padding: 1rem;
  color: white;
}

#footerright {
  display: flex;
  justify-content: flex-end;
}

#footerright ul {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
}

#footerright ul li {
  padding: 0px 10px;
  color: white;
}

@media screen and (max-width: 580px) {
  footer {
    flex-direction: column;
    align-items: center;
  }
  .footer-inner {
    justify-content: center;
    min-width: 240px;
  }
  #footerright {
    justify-content: center;
  }
  #footerright > ul {
    /*justify-content: center;*/
    align-items: center; /* because of the changed direction this is now horizontal alignment / centering */
  }
}

<footer>
  <div class="footer-inner" id="footerleft">&copy<span id="footer-year">Year</span>&nbspThe Company</div>
  <div class="footer-inner" id="footerright">
    <ul>
      <li id="facebook">Twi</li>
      <li id="instagram">Fac</li>
      <li id="twitter">Ins</li>
    </ul>
  </div>
</footer>

Answer 4

某些浏览器具有默认的“用户代理样式表”，即应用于页面元素的默认样式。在 Webkit 中，浏览器会向您的 ul 添加一些影响您的样式的属性：

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-padding-start: 40px;

如您所见，在您的 ul 之前和之后添加了边距，这导致了您描述的移动问题，其中 ul 高于其兄弟。还有填充，它将您的内容向右移动。

要重置这些样式，您只需将这些默认值设置为零，如下所示：

#footerright ul {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-padding-start: 0;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

注意：您不需要重置上面的 -webkit- 规则，只需重置padding-left、margin-top、和margin-bottom。