我应该使用 display: block，还是应该始终使用 display: flex？

Posted 2023-03-05

【中文标题】我应该使用 display: block，还是应该始终使用 display: flex？

【英文标题】：Should I ever use display: block, or should I always use display: flex?

【发布时间】：2016-12-21 06:13:24

【问题描述】：

我最近学习了很多关于 flexbox 的知识，但有一件事我还不清楚。我应该始终将display 设置为flex/inline-flex，还是使用block/inline-block 更有利？

我找到了几篇有用的文章，但没有一篇文章回答了这个特定的问题。 This article 使用 flexbox 解释了不同 display 值之间的差异，而不是将它们与 display: block 进行比较。该问题确实表明使用block/inline-block 已过时，但我还没有看到任何其他消息来源证实这一点。如果display: block 现在已经过时了，我会认为它会在W3 Schools 上这么说（并不是说它们总是正确的，但它们似乎是一个很好的来源）。

几个答案提到了this article，但同样，它没有解释何时应该使用display: block 而不是display: flex（如果有的话）。

回答类似问题的其他文章是this one 和this one。虽然两者都是很棒的文章。第一个对两者都有优点和缺点，但 flexbox 的唯一显着缺点是浏览器兼容性，这不是这个项目关心的问题。后一篇文章给出了我看到的最佳答案，即使用display: flex 允许元素保留弹性框属性。这是否意味着如果它不需要 flexbox 属性我应该只使用display: block？是否会对性能产生影响，还是我应该一直使用display: flex？

【问题讨论】：

我个人喜欢* display: flex; 的大重置，效果出奇的好。试试看。

@torazaburo ，你认为一切都应该是 display:flex 吗？

这是一些人喜欢的选项。

【参考方案1】：

它们是不同的盒子布​​局模型。都是有效的，各有优缺点。

block 和 inline-block 都不是过时的。您仍然可以使用它们，而且 CSS 工作组仍在添加您可以与这些旧布局一起使用的新功能。

flexbox 的唯一显着缺点是浏览器兼容性

这是错误的，flexbox 有很多缺点，比如lack of floating and lack of multicolumns：

Flex 布局表面上类似于块布局。它缺少很多 可以使用的更复杂的以文本或文档为中心的属性 在块布局中，例如floats 和columns。作为回报，它变得简单 以及用于分配空间和对齐内容的强大工具 Web 应用程序和复杂网页通常需要的。

这是否意味着如果它不需要 flexbox 属性我应该只使用display: block

即使您不需要弯曲，Flexbox 仍然可以工作。但在那种情况下，我会劝阻它。块布局更简单，这可能意味着浏览器可以更快地呈现它。

【参考方案2】：

'flex' 是为使用更简单和更好的响应式设计而创建的，因此它需要更多的渲染计算时间，如果您不需要响应式设计，最好使用 'block'，因为它更快。