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技术实现相同的布局。

以下是演示：

Basic Layout Using a CSS Grid
Basic Layout Using Flexbox

感谢您提供任何指导。

Answer 1

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

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

使用flexbox通常需要额外的div或两个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

感谢。

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

1 个答案: