为什么没有 <flex> 或 <grid> 元素？答案

【问题标题】：Why aren't there < flex > or < grid > elements?为什么没有 <flex> 或 <grid> 元素？
【发布时间】：2019-12-05 19:44:42
【问题描述】：

其他display值有一个或多个对应的HTML元素，如：

block - div, p
inline - 跨度、强等。
list-item-李
table - 表格、表格行 - tr 等。
无 - 模板

但display: grid 和display: flex 必须通过样式分配。如果<flex> 和<grid> 元素可用，我可以看到更容易阅读DOM。

既然可以制作自定义元素，是否没有将新元素类型添加到规范中？

【问题讨论】：

因为 HTML 是关于文档结构的，而 flex 和 grid 与此无关。 CSS 是关于视觉样式的，而 HTML 与此无关。 Flex 和 grid 都是关于视觉风格而不是文档结构。

标签： html css flexbox css-grid specifications

【解决方案1】：

您的问题的答案与样式与所呈现数据的分离有关。

您用于显示数据的 HTML 标记应根据您正在显示的数据类型进行选择。例如，您可以在生成列表时使用<li>，或者在您希望文本突出时使用<strong>。 CSS 为您修改数据的呈现方式提供了很大的灵活性，允许您更改数据的显示方式，例如 <strong> 或 <em> 标签中的文本。许多标签的样式可以更改，以便它们的行为与其他标签一样。例如，您可以使<span> 标记的行为类似于<div> 标记，反之亦然。但是，您不应该这样做。换句话说，您选择的标签应该基于正在显示的数据类型，例如<li> 用于列表项或<p> 用于段落。从技术上讲，您永远无法将数据与其显示方式完全分开，但您应该尽可能多地尝试这样做。

<flex> 和<grid> 对于您要显示的数据类型没有任何意义。因此，它们是可使用 CSS（而不是标签）编辑的样式。

【讨论】：

【解决方案2】：

如果<flex> 和<grid> 元素可用，我可以看到更容易阅读DOM。

您建议将内容和演示结合起来，这与创建 CSS 的separation of concerns 原则相悖。

HTML 用于组织内容。 CSS 用于呈现内容。您的 <flex> 和 <grid> 元素将结合这两个问题，这就是 1990 年代 CSS 出现之前的情况，当时 HTML 两者兼而有之。

另外，如果我希望我的<article> 成为网格容器，或者我的<aside> 成为弹性容器，该怎么办？

为什么不同时拥有<block> 和<inline>？

事情开始变得混乱。

另外，你的问题的前提是错误的。

其他display 值具有一个或多个对应的HTML 元素...但display: grid 和display: flex 必须通过样式分配。

实际上，所有 HTML 元素的display 值已分配。唯一的区别是样式的来源。

在原始形式中，HTML 元素没有样式。它们只有语义。

直到浏览器分配default styles，元素才具有表现意义。

所以，你能这么说的唯一原因……

其他display值有一个或多个对应的HTML元素，如：

block - div, p

inline - 跨度、强等。

list-item-李

table - 表格、表格行 - tr 等

... 是因为浏览器用这样的方式定义了这些元素：

Appendix D. Default style sheet for HTML 4

如您所见，display 值已分配。

因此，浏览器为 HTML 元素设置了基本的格式设置。这些样式的更改和添加由作者决定。

这里有更多细节：

【讨论】：