这个基于Flexbox的布局需要额外的标记吗？

Question

我现在进入Flexbox，试图看看如何从使用传统的CSS网格过渡。

我有两个布局:一个是用CSS网格制作的。另一个是用Flexbox制作的。两个示例的基本布局都是非常基本的:页眉、导航、内容部分和页脚。

从设计上看，它们看起来都是一样的，对于RWD来说，它们的行为也完全一样。但是，为了使用Flexbox完成相同的行为，我必须在Nav和Content部分周围创建一个包装器div。

这是与CSS网格布局一起使用的HTML：

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

这是与Flexbox布局一起使用的HTML：

<div class="main-container">
    <header>Header</header>
    <div class="site-content">
        <nav>Nav</nav>
        <section>Content</section>
    </div>
    <footer>Footer</footer>
</div>

注意<div class="site-content">围绕着nav和section元素。

因此，我的问题是:为了使用Flexbox完成布局，<div class="site-content">是否需要围绕nav和section元素？

我试图用相同的HTML实现相同的布局，但使用不同的CSS技术。

以下是演示：

1. 使用CSS网格的基本布局
2. 使用Flexbox的基本布局

谢谢你在这方面的指导。

Answer 1

答案很简单：是，需要额外的包装器。

我在2011年由理查德·谢泼德撰写的“粉碎杂志”中找到了这篇文章，其中确认有时需要一个额外的包装容器来使用Flexbox来处理子元素。诚然，他的文章使用了2009年的旧语法，但情况仍然适用：

使用flexbox通常需要额外的div或两个div，因为任何flexbox元素的父元素都需要将display设置为box。在此之前，您可以通过以下方法逃脱惩罚：

http://www.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/提取液

谢谢。