这种基于 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>

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

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

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

以下是演示：

感谢您对此的任何指导。

Answer 1

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

我能够在 Richard Shepherd 2011 年的 Smashing Magazine 中找到这篇文章，其中确认有时需要额外的包装容器来处理子元素与弹性盒子。诚然，他的文章使用了 2009 年的旧语法，但情况仍然适用：

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.

摘自 CSS3 Flexible Box Layout Explained

谢谢。

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

Does this Flexbox-based layout require extra markup?

css

flexbox