Question

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

我有两个主要问题：

<ul>上的justify-content属性似乎没有启动。如果我已经<ul> display: flex项，那么肯定子元素应该是flex项，不是吗？在页脚的移动版本中，<li>项目仍然停留在右侧。
为什么右侧容器（在移动视图中切换为底部项目）的高度比移动设备上的兄弟容量大得多？此项目没有额外的填充或高度值。

**注意 - 我已经在每个元素周围放置了1px边框，以便更容易看到发生了什么。

＆＃13;

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

＆＃13;

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

＆＃13;

View on CodePen

Answer 1

关于移动视图中的“右对齐”：将padding-left: 0;添加到ul以避免ul的默认填充，这会导致与居中位置的水平偏移。< / p>

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

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

Answer 2

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

来解决您的问题

＆＃13;

* {
  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 */
  }
}

＆＃13;

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

＆＃13;

Answer 3

为什么右侧容器的高度比它的大得多移动电话的兄弟姐妹？

因为当处于非移动设备尺寸时，flex row 项align-items的默认值会启动，即stretch，并在相同的行同样高，在包裹时不是这种情况，或者使用flex column 方向，它们会根据边距，边框，填充和内容折叠到自己的高度。

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

Flexbox“Justify Content”无效

margin / padding 重置（ul {margin: 0; padding: 0;}）也将处理移动和非移动视图中ul遭受的小左偏移，尽管在移动视图中，它更明显，我猜也是你的意思 justify-content似乎无法启动。

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，{{ 1}}和margin-top。

＆＃34;证明内容＆＃34;在我的flex无序列表中不起作用

4 个答案: