为什么在媒体查询中使用display:block来覆盖display:flex

Question

我正在看一些HTML代码，它看起来像这样(总结(：

html,
body {
height: 100%;
background: #1c1c1c;
}
header {
background: #1c1c1c;
display: flex;
}
.child {
flex-grow: 1;
}
ul {
display: flex;
}
li {
flex-grow: 1;
}
@media only screen and (max-width:542px) {
header div:nth-child(1) {
display: block;
}
}

<header>
<div class="child">
<img src="logo.png" />
</div>
<ul class="child">
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>

</header>

css底部第三行的display:block没有任何效果，我发现自己在想它是用来做什么的？

Answer 1

这在代码中并不明显，因为似乎缺少部分。

但下面是基本逻辑：

• display: flex将子元素排列成一行
• display: block恢复垂直堆叠

因此，覆盖将使您退出flex布局，返回到标准块布局(其中flex属性没有影响(。

这种设置可以方便地从桌面切换到移动布局，以及其他用例场景。

以下是代码的简化版本，用于说明：

.child {
display: flex;
justify-content: space-around;
}
@media (max-width:542px) {
.child {
display: block;
}
}

<ul class="child">
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>

jsFiddle演示