Eric Meyer (@meyerweb) 是一位 CSS 大师,作家,以及 An Event Apart 会议的联合创始人。他谈到了一个布局时代的结束(以及一个新时代的开始)。
在最初……Tim 说“让标记存在”。然后,Tim 将结构与外观分开。这是网络的一个基本特征。
Mozilla Netscape 在参与网络并扩展 HTML(1994 年)时,所做的第一件事就是扩展其表示能力。立即打破了内容和设计之间的清晰分离。
“有一段时间,一直都是表格。Spacer GIFs 和所有。是的,我用硬 G 说 GIF。处理它。”
笑话!
为什么网页设计师离开餐厅?他受不了表格布局!— @meyerweb #w3conf
— Christine Bower (@chrisbean) 2013 年 2 月 22 日
随着 IE 5 的发布,我们进入了 CSS 时代。
CSS1 是一份非常短的文档。您可以在一个晚上读完它。它根本没有布局能力。好吧,它有浮动。但它不是为布局而设计的,它只是为了将文本环绕图像(以模拟 IE 中的 align
属性)。
用于布局的浮动很危险。例如,“浮动下降” - 这不利于布局。同样,“浮动包含”很奇怪,并且直到今天仍然是一个问题。浮动有 clear
,这使得它们真正有用于定位。
第一个使用定位进行布局的主要网站是 Doug Bowman 的 Wired.com。他做出的设计决定是由技术强加的。
今天我们仍然使用浮动进行布局。这是一个技巧,而且一直都是技巧。公平地说,表格也是一个技巧。它们不是为它设计的,但它是我们需要的最接近的东西。
vw/vh 单位分别代表视窗宽度的 1/100 或视窗高度的 1/100。我们可以用它们设置宽度和高度,将它们与页面上的可用空间相关联。类似于百分比,但始终与视窗相关,而不是父元素。它不只是用于长度,它也可以用于 font-size
,将排版直接与视窗相关联。
Flexbox 是一种专门为布局设计的布局系统。它也有 一个 polyfill。注意:它只适用于旧语法,不适用于新语法,并且 polyfill 对于新语法还没有完全到位。您可以使用 flexbox 相关的属性(如 justify-content
)获得很多控制权。
圣杯布局 使用带巨大负边距和正填充的疯狂“反常”方法创建了标题/页脚/主体/左侧/右侧布局。它很复杂也很奇怪,但它起作用了。不过,很难进行更改(例如,固定-流体-固定而不是流体-固定-流体)。
Flexbox 使得“圣杯”般的布局变得微不足道。更不用说:源代码顺序无关紧要。使主体内容排在首位仅仅是更改 order
的问题。
关闭 flexbox(display: block
而不是 display: flex
)将把所有子元素变成普通块,并再次在彼此之上布局。这使得单列(可能是移动设备)布局变得容易。但请记住,要考虑源代码顺序。
默认情况下,Flexbox 中的元素高度相同,但它们不一定是相同的。您可以将它们沿着顶部(flex-start
)、底部(flex-end
)、中心或基线对齐。没错:CSS 中的垂直居中(有点)。您可以使所有 flexbox 遵循这些规则,或者在每个 flexbox 基础上进行混合和匹配。
将所有这些与内容对齐结合起来,您将获得一些非常强大的布局可能性。注意:我的文章 介绍了如何将旧语法和新语法结合使用以实现 flexbox。
网格是另一个即将推出的新布局系统。您定义网格线,然后基本上将内容挂在网格线上。“将此从该网格线布局到另一个网格线。”
网格和 flexbox 不是互斥的。一个网格(单元格?)可以是 flex 父元素。网格中可以包含另一个网格。flexbox 中可能包含一个网格。Yo dawg,我听说你喜欢网格中的网格... 您懂的。
在网格中,有新的 fr
(分数)单位。它们代表网格布局中剩余的空间。语法很奇怪。多个值,其中一个将“胜出”。
CSS 区域 与布局相关。您仍然需要使用实际的布局技术,但在区域中,您可以控制内容从一个元素流向另一个元素的方式。注意:在 CodePen 上进行区域玩法的竞赛 正在进行。
“二十年的布局技巧即将结束。也许不是明天,但很快,在我们余生中。”

这是会议的最后一个演讲。我认为这种情绪很好。
所以,不要变得太感性或什么的,但整个会议让我再次爱上了网络开发。谢谢孩子们。 #w3conf
— Jordan Pagels (@designerjordan) 2013 年 2 月 23 日
不错的演讲!我想在线观看它。
这让我想要在网络上做更多的事情!而且我才刚刚开始。
那么,我们什么时候可以期待在每个网站上使用 flexbox 呢?
这将扩展我们在网页设计中可以做的事情。
所以我现在很困惑 - 究竟是谁先讲了这个笑话 - Dave Rupert 还是 Christine Bower?
我第一次是在广播里听到 Dave 说的。
我一直都很佩服 Eric 的演讲!他是一位真正的英雄 :)
不错!谢谢你的笔记,Chris。
今天在网络开发中更容易保持热情。
鼓舞人心的文章!@GeekChicSocial
我喜欢 flexbox,我第一次接触它就是通过你的另一篇文章。
我已经几年没有做 HMTL+CSS 工作了,现在我愿意回来。但我们仍然需要浏览器更好的支持!使用 flexbox 将相关内容放在 HTML 文档顶部,并将标题和侧边栏使用 flexbox 放置到它们的布局位置将是一件很棒的事情!真正的语义 Web 与漂亮且多功能的布局工具相结合!
移动设备特定的布局也将被抛弃。从相同的语义标记开始,我们可以使用一些 CSS3 调整来为大屏幕(我有 2 台 30 英寸显示器,分辨率为 2560×1600)、小型垃圾设备和手机全部一起布局。想想微软 SharePoint 2013 将移动设备特定的演示文稿作为有史以来最伟大的新闻 lol!