显示：css-table vs flex - 我什至需要后者吗？

Posted 2023-05-08

【中文标题】显示：css-table vs flex - 我什至需要后者吗？

【英文标题】：display: css-table vs flex - do i even need the latter?

【发布时间】：2016-09-19 20:48:05

【问题描述】：

我习惯于像这样垂直居中块元素：

.parent 
    display: table-cell;
    vertical-align: middle;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;

当我需要 IE9 和更低的支持时。当然，使用 css-tables 作为旧 IE-s 的后备。我不需要 flex 做其他事情。但最近我开始问自己：为什么我还需要 flex 呢？ Css-table 是这个星球上几乎所有浏览器都支持的强大解决方案，根据this Ben Frain's article，它甚至更快。这里的 css-table 还不够吗？当向人们询问这个问题时，我得到了诸如“flex 更现代”之类的答案。这很好，我也明白，有些事情只有 flex 才能实现，但这并不是真正的答案。我们谈论的是最简单的居中块元素。

所以我有两个问题：

在这种情况下我必须使用 flex 吗？ 如果“是” - 为什么？

【问题讨论】：

一般来说，一个问题没有单一的解决方案，所以尽量坚持一种你觉得舒服的方法，不要把你不完全理解的事情复杂化，将来必须审查代码并进行更改的将是您。..

查看this post，它展示了一些可以使用css表代替flexbox的用例

【参考方案1】：

我们不再使用 html 中的表格作为布局工具是有原因的。

这不是语义。当我们想到表格时，我们会想到数据的表示。 MDN解释得很好。

在创建 CSS 之前，HTML 元素通常被用作 一种页面布局的方法。自 HTML 以来一直不鼓励这种用法 4、元素不应该用于布局目的。 但是，HTML 电子邮件是一个例外，表格仍然很常见 用于布局目的。造成这种情况的原因是糟糕的 CSS 支持 流行的电子邮件客户端。

因此，除非您正在设计电子邮件布局，否则不要使用表格元素或 css 表格属性进行布局。

如果您需要像示例中那样的后备技巧，您仍然可以使用它，但除此之外，请使用现代适当的方法，无论是网格、flex、浮点数还是其他方法。

【讨论】：

但我不是在谈论 HTML-tabels - 这是完全不同的事情。 CSS-tables 只是强制非表格元素表现得像表格元素。这不就是 CSS 的意义所在吗？ CSS 毕竟是一种样式语言。

"CSS 表格只是强制非表格元素表现得像表格元素。"这就是问题所在。它们是桌子吗？不？然后不要给他们表格属性。一个有问题的场景：如果我和你一起工作并在你的 CSS 中看到你有一些规则，比如 .container display: table 我认为那个容器是一个表格。但是如果有像 .container display: flex 这样的东西，我就知道那个容器正在帮助你布局东西。

多么荒谬的断言：“不要给他们表格属性。”如果它仍然使用语义标记并且在视觉上表现良好，那么如何设计某种东西以实现特定设计几乎完全无关紧要。 display: table not 何时用于布局？迂腐的废话。