flexbox vs tables,为什么我们需要flexbox？

Question

任何人都可以请赐教我的新Flexbox的布局模式是如何比任何现有的表的方式更好？(显示:表格和所有这些都包含在我的情况下)？

在IE10下它根本不受支持,这在不久的将来不是很好,而且我看不到桌面布局的任何好处.但是,互联网开始充满了这种新的CSS布局方法的"崇拜者",我看到的所有例子都可以很容易地用普通的css完成而没有问题.

---

更新25.12.15:

我一直在使用flexboxes,因为它们被引入现代浏览器并停止使用display:table等等,因为flexboxes更强大且易于使用.

Answer 1

在使用flexbox和使用表格显示值或浮点数来布局页面之间,我可以想到三个区别:

1. 无论HTML源顺序如何,都能够重新排序元素,同时将元素保持在正常流程中 - 您可以通过使用order属性指定整数值来实现此目的.
2. 它需要比传统浮动布局更少的类型(您不需要所有伪元素用于清除目的)并且更加语义,而使用浮动或表格布局显然不是.
3. 灵活项目增长和缩小以根据祖先元素的尺寸填充水平和垂直空间的能力 - 使用flex-grow和flex-shrink属性.

问题(正如你所指出的)是支持仍然很糟糕; 事实上,Firefox仍然在实现旧版本的flexbox模块,因此您必须考虑到语法和行为方面的细微差别,具体取决于您使用的浏览器.不过,有人说它是布局的未来,特别是对于经常出现的复杂网络应用程序.如果你能做出不可避免的明智投资,那就值得学习 - 以现在不能真正使用为代价.

我还建议你看看这篇粉碎的杂志文章,对flexbox进行友好的介绍(最近写的)

Answer 2

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

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