css - flexbox vs tables，为什么我们需要 flexbox？

Question

任何人都可以启发我新的 Flexbox 布局模型比当前表格方式更好吗？ (display:table 和所有这些都包含在我的案例中)？

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

---

25.12.15 更新:

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

Answer 1

在使用 flexbox 和使用表格显示值或 float 布局页面之间，我可以想到三个区别:

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

问题(正如您所指出的)是支持仍然很差；事实上，Firefox 仍在实现旧版本的 flexbox 模块，因此您必须考虑语法和行为方面的细微差异，具体取决于您使用的浏览器。不过，很多人都说它是布局的 future ，尤其是对于更频繁出现的复杂网络应用程序。如果您愿意进行不可避免的明智投资，那么值得学习 - 代价是现在不能真正使用。

我也建议你看看this smashing magazine article对 flexbox 的友好介绍(这是最近写的)