27

谁能告诉我新的 Flexbox 布局模型比当前的表格方式更好吗？（显示：表格和所有这些都包含在我的案例中）？

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

25.12.15 更新：

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

4

4 回答 4

25

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

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

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

我还建议您查看这篇精彩的杂志文章，以友好地介绍 flexbox（它是最近写的）

于 2013-08-24T14:40:15.240 回答
3

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

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

于 2013-10-20T14:04:28.293 回答
3

简而言之，这将在几年内受益。像许多高级 css 技术、HTML5 等一样，在接下来的几年里，少数人会以痛苦的后备和 shims/shivs 来采用它们。

当浏览器将来支持它时，我们将举行聚会，并且所有人都讨厌不支持它们的“旧”浏览器:)。

于 2013-08-24T13:35:03.887 回答
0

弹性盒更灵活，语义更合适，因为表格从来都不是用来布局的。从MDN 介绍到 Flexbox：

为什么选择 Flexbox？

长期以来，唯一可用于创建 CSS 布局的可靠的跨浏览器兼容工具是浮动和定位等功能。这些工作，但在某些方面，它们也有限制和令人沮丧。

使用此类工具以任何方便、灵活的方式很难或不可能实现以下简单的布局设计：

  • 垂直居中其父项内的内容块。
  • 使容器的所有子项占用等量的可用宽度/高度，而不管可用的宽度/高度是多少。
  • 使多列布局中的所有列采用相同的高度，即使它们包含不同数量的内容。

正如您将在后续部分中看到的，flexbox 使许多布局任务变得更加容易。让我们深入挖掘！

于 2021-08-19T03:19:41.287 回答