这种基于 Flexbox 的布局是否需要额外的标记？

我现在开始使用 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 and section元素。

所以我的问题是：是<div class="site-content">周围的nav and section使用 Flexbox 完成布局所需的元素？

我正在尝试使用相同的 HTML 但不同的 CSS 技术来实现相同的布局。

以下是演示：

1. 使用 CSS 网格的基本布局 http://jsfiddle.net/rzea/kLsfbedd/1/
2. 使用 Flexbox 的基本布局 http://jsfiddle.net/rzea/vu62mtzb/

感谢您对此的任何指导。

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

我在 2011 年的《Smashing》杂志上找到了这篇文章理查德·谢泼德 http://www.smashingmagazine.com/author/richard-shepherd/其中确认有时需要额外的包装容器才能使用 Flexbox 处理子元素。诚然，他的文章使用了 2009 年的旧语法，但这种情况仍然适用：

使用 Flexbox 通常需要一个或两个额外的 div，因为任何 Flexbox 元素的父元素都需要具有display set to box。以前，您可以避免以下情况：

<div style="float: left; width: 250px;"> Content here </div>
<div style="float: right; width: 250px;"> Content here </div>

现在使用 Flexbox，您需要：

<div style="display: box">
  <div style="width: 250px"> Content here </div>
  <div style="width: 250px"> Content here </div>
</div>

你们中的许多人已经转身离开，因为这种纯粹用于展示的额外标记受到了侮辱。这是可以理解的。但事情是这样的：一旦你掌握了 CSS，这个额外的包含 div 就变得很小了。事实上，您通常已经有一个要添加的包含元素（不一定是 div）display: box到，所以根本不需要权衡。

摘自CSS3 灵活框布局解释 http://www.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

Thanks.