这个基于Flexbox的布局需要额外的标记吗？ [英] Does this Flexbox-based layout require extra markup?

问题描述

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

I'm getting into Flexbox now, trying to see how I can transition from using the traditional CSS grids.

我有两个布局：一个使用CSS格。另一个使用Flexbox。这两个例子的基本布局是相当基本的：头，导航，内容部分和页脚。

I have two layouts: One made with a CSS grid. The other one made using Flexbox. The basic layout for both examples is quite basic: A header, a nav, a content section and the footer.

在设计方面，他们看起来一样，行为完全同样的RWD。但是，为了让我使用Flexbox完成相同的行为，我不得不在Nav和Content部分创建一个包装器div。

Design-wise they both look the same and behave exactly the same for RWD. However, in order for me to accomplish the same behavior using Flexbox I had to create a wrapper div around the Nav and the Content sections.

这是与CSS网格布局：

This is the HTML used with the CSS grid layout:

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

This is the HTML used with the Flexbox layout:

<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 < div class =site-content> c>和节元素？为了使用Flexbox完成这个布局？

So my question is: Is the <div class="site-content"> around the nav and section elements necessary in order to accomplish that layout using Flexbox?

以下是演示：

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


2. 使用Flexbox的基本布局

1. Basic Layout Using a CSS Grid
2. Basic Layout Using Flexbox

感谢您的指导。

推荐答案

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

The answer is simple: Yes, that extra wrapper is required.

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

I was able to find this article in Smashing Magazine from 2011 By Richard Shepherd where confirms that sometimes an extra wrapping container is needed in order to treat the child elements with Flexbox. Granted, his article uses the old 2009 syntax, but still, the case applies:

使用flexbox通常需要额外的div或两个，因为任何flexbox元素的父代需要将 display 设置为框。之前，您可以使用以下方法：

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>

现在使用flexbox，您需要：

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>

你们中的很多人已经离开了，被这个额外的标记侮辱，纯粹是为了演示。这是可以理解的。但这里的东西：一旦你掌握CSS，这个额外的包含div成为一个小的价格付出。事实上，你通常已经有一个包含元素（不一定是div）来添加 display：box ，所以不会有一个权衡。

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弹性框布局说明

谢谢。

这篇关于这个基于Flexbox的布局需要额外的标记吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！