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

【问题标题】：Does this Flexbox-based layout require extra markup?这种基于 Flexbox 的布局是否需要额外的标记？
【发布时间】：2016-03-25 12:04:29
【问题描述】：

我现在开始接触 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">。

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

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

这里是演示：

感谢您对此的任何指导。

【问题讨论】：

标签： css flexbox

【解决方案1】：

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

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

使用 flexbox 通常需要一两个额外的 div，因为任何 flexbox 元素的父级都需要将 display 设置为 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 Flexible Box Layout Explained

谢谢。

【讨论】：