CSS flexbox vs 表格，为什么我们需要 flexbox？

flexbox vs tables, why do we need flexbox?

提问by vsync

Can anyone please enlightenme on how the new Flexbox layout model is any better than current tables way? (display:table and all those are includedin my case) ?

任何人都可以请赐教我的新Flexbox的布局模式是如何比任何现有的表的方式更好？（显示：表格，所有这些都包含在我的案例中）？

It's not supported at all under IE10 which isn't very good for the near future, and I just can't see any benefits over table layout. But still, the internet is starting to get full of "worshipers" of this new CSS method of layout, and all the examples I see can be easily done with normal css without problems.

它在 IE10 下根本不受支持，这对不久的将来来说不是很好，而且我看不到表格布局有任何好处。但是，互联网仍然开始充满这种新 CSS 布局方法的“崇拜者”，我看到的所有示例都可以使用普通 css 轻松完成，没有问题。

---

---

Update 25.12.15:

I have been using flexboxes a lot since they were introduced to modern browsers and had stopped using display:tableand so on, because flexboxes are more powerful and easy to use.

25.12.15 更新：

自从 flexbox 被引入现代浏览器并停止使用以来，我一直在使用它们display:table，因为 flexbox 更强大且更易于使用。

采纳答案by Transparent

There are three distinctions I can think of between using flexbox and using table display values or floats to layout a page:

我能想到使用 flexbox 和使用表格显示值或浮动来布局页面之间的三个区别：

1. Being able to re-order elements irrespective of the HTML source order, while keeping elements in the normal flow - you can do this by specifying an integer value with the orderproperty.
2. It requires less typing than traditional float layouts (you don't need all of the pseudo-elements for clearing purposes) and is more semantic, while using floats or tables for layouts obviously isn't.
3. The ability for flex-items to grow and shrink to fill horizontal and vertical space based on an ancestor elements' dimensions - by using the flex-growand flex-shrinkproperties.

1. 能够在不考虑 HTML 源代码顺序的情况下重新排序元素，同时将元素保持在正常流程中 - 您可以通过使用order属性指定整数值来实现此目的。
2. 与传统的浮动布局相比，它需要的输入更少（您不需要所有伪元素来清除目的）并且更具语义，而使用浮动或表格进行布局显然不是。
3. 弹性项目根据祖先元素的尺寸增长和收缩以填充水平和垂直空间的能力 - 通过使用flex-grow和flex-shrink属性。

The problem (as you've pointed out) is that support is still pretty bad; In fact Firefox is still implementing an older version of the flexbox module, so you have to account for minor discrepancies in syntax and behavior, depending on which browser you're using. It has been said quite a bit, though, that it isthe future for layouts, especially for complex web apps that are popping up more often. It's worth learning if you're okay with making an inevitably wise investment - at the cost of not really being useable right now.

问题（正如你所指出的）是支持仍然很糟糕；事实上，Firefox 仍在实现旧版本的 flexbox 模块，因此您必须考虑语法和行为上的细微差异，具体取决于您使用的浏览器。不过，已经有不少人说这是布局的未来，尤其是对于频繁出现的复杂 Web 应用程序。如果您愿意进行不可避免的明智投资，那么值得学习 - 代价是现在无法真正使用。

I also suggest you take a look at this smashing magazine articlefor a friendly introduction to flexbox (it's fairly recently written)

我还建议你看看这篇很棒的杂志文章，对 flexbox 有一个友好的介绍（它是最近写的）

回答by Frank L?mmer

The Flexbox model is more powerful than display table. Flexbox supports layouts for right to left languages for example. And yes indeed, flexbox is a bit complex and that's an entry barrier. Float and clearfix layouts are a (clever) hack, somehow in the same way table layouts are a hack, flexbox is meant for layout.

Flexbox 模型比显示表更强大。例如，Flexbox 支持从右到左语言的布局。是的，flexbox 确实有点复杂，这是一个入门障碍。Float 和 clearfix 布局是一个（聪明的）hack，就像表格布局是一个 hack 一样，flexbox 是用于布局的。

The browser support is getting better lately, some say we should use it now. Bootstrap 3 does however not make use of flexbox, but i can imagine that the next version will.

最近浏览器支持越来越好，有人说我们现在应该使用它。然而，Bootstrap 3 没有使用 flexbox，但我可以想象下一个版本会。

回答by StackExchange What The Heck

Simply put, it's something that'll be beneficial in a few years. Like many advanced css techniques, HTML5, etc., a few people will adopt them with painful fallbacks and shims/shivs for the next couple of years.

简而言之，这将是几年后有益的事情。像许多高级 css 技术、HTML5 等一样，在接下来的几年里，一些人会以痛苦的回退和 shims/shivs 来采用它们。

When browsers support it in the future, we'll have a party and all hate on the 'old' browsers that don't support them :).

当浏览器将来支持它时，我们将举办一场派对，并且所有人都讨厌不支持它们的“旧”浏览器:)。