Does this Flexbox-based layout require extra markup? - css

Question

I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.
I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.
Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.
This is the HTML used with the CSS grid layout:
<div class="container-12 clear">
<header class="grid-12">Header</header>
<nav class="grid-4">Nav</nav>
<section class="grid-8">Content</section>
<footer class="grid-12">Footer</footer>
</div>
This is the HTML used with the Flexbox layout:
<div class="main-container">
<header>Header</header>
<div class="site-content">
<nav>Nav</nav>
<section>Content</section>
</div>
<footer>Footer</footer>
</div>
Notice the <div class="site-content"> around the nav and section elements.
So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?
I'm trying to achieve the same layout with the same HTML but different CSS techniques.
Here are the demos:
Basic Layout Using a CSS Grid
Basic Layout Using Flexbox
Thanks for any guidance on this.

Answer 1

The answer is simple: Yes, that extra wrapper is required.
I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:
Using flexbox often requires an extra div or two, because the parent of any flexbox element needs to have display set to box. Before, you could get away with the following:
<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>
Now with flexbox, you’ll need:
<div style="display: box">
<div style="width: 250px"> Content here </div>
<div style="width: 250px"> Content here </div>
</div>
Many of you have already turned away, insulted by this extra mark-up that is purely for presentation. That’s understandable. But here’s the thing: once you master the CSS, this extra containing div becomes a small price to pay. Indeed, you’ll often already have a containing element (not necessarily a div) to add display: box to, so there won’t be a trade-off at all.
Extract taken from CSS3 Flexible Box Layout Explained
Thanks.