Why use display: block in a media query to override display: flex? - html

Question

I am looking at some HTML code, which looks like this (summarised):
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>
The display:block on the third line from bottom of the css has no effect and I find myself wondering what it is there for?

Answer 1

It's not apparent in the code because there seem to be parts missing.
But here's the underlying logic:
display: flex lines up child elements in a row
display: block restores vertical stacking
So the override takes you out of flex layout and back to standard block layout (where flex properties have no effect).
This set-up can be handy for switching from a desktop to a mobile layout, among other use-case scenarios.
Here's a simplified version of the code for illustration purposes:
.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 demo