html - 用于页面布局的 Flexbox？

Question

我想知道我是否应该开始使用 flexbox 进行网站/web 应用程序布局设计，而不是 float div 等。

但是我收到的消息很复杂。在一个网站上，他们说 flexbox 现在是页面布局的“ chalice ”: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

然而，创建 css3 flex 规范的人 Tab Atkins 有一个名为“为什么 flexboxes 不适合页面布局”的页面 http://www.xanthir.com/blog/b4580

我看了一个关于这个的视频:http://vimeo.com/98746172

所以我的结论是他的意思是不应该用于复杂的页面布局。那个 display:grid 会更合适。然而，网格可能还需要几年时间才能普及到所有流行的浏览器。

所以我的问题是，截至目前，flexbox 是否比当前的解决方案(div float 、display:table-cell、inline-blocks 等)更适合创建页面布局，我应该使用 flexbox 直到网格出来了？

p.s 我知道 flexbox 与旧浏览器不兼容。但我在这里是假设性的，对于这个问题，我们假设这不是问题。

Answer 1

我认为你误解了 Philip 在 Solved by Flexbox 上的内容。他没有说 flexbox 是布局的 chalice ，布局本身被称为 chalice 。

Tab 提出了一些好的观点，但这并不意味着 flexbox 不是我们目前针对某些布局的最佳解决方案。

简单

flexbox 会使您的 HTML 或 CSS 更简洁、更易于理解或维护吗？使用 flexbox 可以让您避免像删除行内 block 元素上的空格或 display: table 通常需要的额外标记这样的技巧。

性能

与 float 或内联 block 元素相比，Flexbox 元素的渲染速度稍慢。但是，除非您的页面上有数百个 flexbox ，否则这是优化页面速度时需要考虑的最后一件事。有时使用 flexbox 可以大大减少 CSS 的数量。

灵 active

Flexbox 非常灵活(双关语不是故意的)。您可以执行诸如重新排列元素顺序之类的操作，而使用其他方法可能很难或无法做到这一点。

在做简单的事情时，比如两列布局，我仍然会使用 float 。也就是说，如果您需要 flexbox 为您的布局提供的功能，或者它可以简化您的 HTML 或 CSS，那就去吧!从长远来看，网格布局可能更适合，但它们尚未在大多数浏览器中实现。