Flexbox“证明内容”不起作用
我有一个简单的Flexbox页脚。 当屏幕低于580px时，布局会发生变化，如下所示。
我有两个主要问题：
对<ul>的justify-content属性似乎没有启动。如果我将<ul>作为display: flex项目，那么子元素当然应该是flex项目，否？ 在页脚的移动版本中， <li>项目停留在右侧。
为什么右侧容器（即切换到移动视图的底部项目）的高度比其移动大小的兄弟更大？ 没有额外的填充或高度值添加到此项目。
**注意 - 我在每个元素周围放置了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">©<span id="footer-year">Year</span> The 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>为什么右手边容器的高度比手机大小的兄弟高？
因为当处于非移动大小时，flex行项目的align-items的默认值align-items进入stretch ，并使同一行上的项目等高，但这不是包装时的情况，或者使用flex列方向，其中他们会根据保证金，边界，填充和内容倒塌到自己的高度。
在这种情况下，如果您从ul删除预设的填充/边距，它会折叠到li的大小，虽然它们看起来有相同的高度，但基于不同的字体大小等，它们可能会变得不相等再次。
Flexbox“证明内容”不起作用
在移动视图和非移动视图中，margin / padding reset（ ul {margin: 0; padding: 0;} ）也会照顾ul受到的左侧偏移，尽管在移动视图中它更加明显，我也猜测这是你的意思， justify-content似乎没有启动。
关于移动视图中的“右对齐”：添加padding-left: 0; 到ul以避免默认填充的ul s，这会导致从居中位置的水平偏移。
关于第二个容器的大小：将padding: 0添加到.footer-inner和margin: 0到#footerright ul以重置默认填充和边距：
https://codepen.io/anon/pen/GOQwBV
您可以通过添加基本的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">©<span id="footer-year">Year</span> The 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>