css圣杯布局和双飞翼布局_现代CSS布局，功能和责任

css圣杯布局和双飞翼布局

“Separation of content and presentation” was our rallying cry as CSS layout advocates in the heady days of the new Millennium. We had already moved away from embedding font information into our markup by way of replacing font tags with CSS. We next aimed to complete that process by moving away from tables for layout. A brave, and somewhat fragile, new world of positioning and floats awaited us.

在新千年的兴盛时期，“内容和表示的分离”是CSS布局倡导者的呼声。 通过使用CSS替换字体标签，我们已经不再将字体信息嵌入到标记中。 我们接下来的目标是通过离开表格进行布局来完成该过程。 一个勇敢的，有些脆弱的定位和浮游世界正在等待着我们。

If separating content and presentation was the goal, these rudimentary techniques got us partway there. We had more separation than with tables for layout, and mercifully the days of slicing up images and content and reassembling them in table cells are gone. Then progress on these techniques seemed to stop.

如果将内容和表示分离是目标，那么这些基本技术将使我们走到这一步。 与用于表格的表格相比，我们有更多的分离空间，而且仁慈地分割图像和内容并将它们重新组合到表格单元中的日子已经一去不复返了。 然后这些技术的进步似乎就停止了。

Our need to create ever-more complex layouts, to build applications and not just websites, continued. We tried to leverage other parts of CSS to make layout easier, working around whitespace issues with inline-block, using display-table to almost attempt to fake the tables for layout of our past in CSS. Recently CSS frameworks have blossomed, many of which allow the creation of complex grids, at a cost of embedding a description of the layout into the markup itself as in this example from Bootstrap.

我们继续需要创建更加复杂的布局，构建应用程序而不仅仅是网站。 我们试图利用CSS的其他部分来简化布局， 使用inline-block来解决空白问题 ，使用display-table几乎试图伪造这些表以用于CSS布局。 最近， CSS框架蓬勃发展，其中许多框架都允许创建复杂的网格，但代价是像在Bootstrap中的示例中那样，将布局的描述嵌入到标记本身中。

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div><div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div> 

What was that about separating content and presentation?

将内容和表示分开是什么意思？

With Flexbox and the upcoming CSS Grid Layout module we have a designed for purpose layout mechanisms for the web. These are layout methods that give a group of elements relationship. It is this relationship that ensures a set of boxes that are defined as flex items are all able to stretch to the height of the tallest, and that the background colour on a sidebar in a Grid layout will run to the height of the far taller content area alongside. Remember faux columns? This class of techniques will soon be in our past.

借助Flexbox和即将推出的CSS Grid Layout模块，我们设计了一种用于Web的专用布局机制。 这些是给出一组元素关系的布局方法。 正是这种关系确保了被定义为flex项目的一组盒子都能够拉伸到最高的高度，并且Grid布局中侧栏上的背景色将达到最高内容的高度。旁边的区域。 还记得人造柱吗？ 这类技术很快就会过去。

Both Flexbox and Grid allow us to properly separate content from presentation. For one-dimensional layouts Flexbox excels. As the items in the flex container have relationship to one another we can display them in reverse order, or even explicitly specify an order with the order property. Want to display the elements one way for desktop and another for mobile? You can change the order within your media queries. Grid is even more powerful as you have the ability to position elements in two dimensions. You can explicitly state where an element sits on the grid. You can layer items, and even mix items with explicit positioning with those that will layout according to Grid’s auto-placement algorithm.

Flexbox和Grid都允许我们正确地将内容与表示分离。 对于一维布局，Flexbox表现出色。 由于flex容器中的项目彼此之间具有关系，因此我们可以按相反的顺序显示它们，甚至可以使用order属性显式指定一个订单。 想要以台式机方式显示元素，以移动方式显示元素？ 您可以在媒体查询中更改顺序。 网格具有更强大的功能，因为您可以在二维中定位元素。 您可以明确声明元素在网格上的位置 。 您可以对项目进行分层 ，甚至可以将具有显式位置的项目与将根据Grid的自动放置算法进行布局的项目进行混合。

With Grid and Flexbox you no longer need to describe your layout in markup, they give us a way to truly separate content and presentation. With these tools we should be able to make decisions about our document structure and markup that do not then force us to compromise on the visual layout in a browser. Nor should the ideal visual layout dictate source order. With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and Flexbox to meet the design requirements, it will be possible for them to stop caring about the document structure at all. Worse, I believe there will be a strong temptation, especially with Grid, to flatten out document structure in order that all elements become a child of the element with the Grid declared. Making layout simple, but at what cost?

使用Grid和Flexbox，您不再需要用标记描述布局，它们为我们提供了一种真正分离内容和表示的方法。 使用这些工具，我们应该能够做出有关文档结构和标记的决定，而这些决定不会迫使我们在浏览器的视觉布局上做出妥协。 理想的视觉布局也不应该决定源顺序。 有了这种力量就要承担重大责任 。 对于开发人员而言，从一开始就可以创建一个语义优美，结构良好的文档，并使用Grid和Flexbox来满足设计要求，就可以使他们完全不再关心文档结构。 更糟糕的是，我相信将会有强烈的诱惑力，尤其是对于Grid来说，要使文档结构扁平化，以使所有元素成为声明了Grid的元素的子元素。 使布局简单，但要付出什么代价？

This flattening out of document structure in order to take advantage of Grid Layout is something of concern to many people, including the specification editors. The current Level 1 specification includes the ability to declare elements on the Grid as a subgrid, maintaining their relationship to the overall parent grid. Fantasai has examples of why this is important. At the current time subgrid is unimplemented in Blink, the browser with the most complete Grid Layout implementation, and is “at risk” in the Level 1 specification, meaning that it has the potential to be dropped. I’d love to see more people talking about this feature, uses for subgrids and the potential of problems without it.

为了利用“网格布局”而使文档结构扁平化是许多人（包括规范编辑器）关注的问题。 当前的1级规范包括将网格上的元素声明为子网格的能力，并保持它们与整个父网格的关系。 范塔赛（Fantasai）举例说明了为什么这很重要 。 当前，具有最完整网格布局实现的浏览器Blink中未实现子网格，并且在1级规范中处于“风险”状态，这意味着它有可能被删除。 我希望看到更多人谈论此功能，子网格的用途以及没有该功能的潜在问题。

That said, whether we get subgrid in Level 1 of the Grid Spec or not, the specifications can’t force us to use these tools well. We have to do that for ourselves. There is a whole generation of web developers who do not own the back story of web standards, who have never sliced up an image and reassembled it in tables nested five deep. We are increasingly handing power tools to those who have just learned what a nail is. Therefore it is vital that we continue to talk about accessibility and semantics alongside showcasing what these new tools can do for us. As use of Grid and Flexbox become mainstream we’re going to have new classes of problems, new anti-patterns. It’s as important to write about those as it is to get excited about the possibilities.

也就是说，无论是否在“网格规范”的1级中获得子网格，规范都无法迫使我们很好地使用这些工具。 我们必须自己做。 有整整一代的Web开发人员不拥有Web标准的背景知识，他们从未切过图像并将其重新组装到嵌套5个深度的表中。 我们越来越多地将电动工具交付给刚刚了解指甲的人。 因此，至关重要的是，我们继续讨论可访问性和语义，同时展示这些新工具可以为我们做什么。 随着Grid和Flexbox的使用成为主流，我们将出现新的问题类别，新的反模式。 对这些内容进行写作与对这些可能性感到兴奋一样重要。

翻译自: https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/

css圣杯布局和双飞翼布局