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

【问题标题】：Should I ever use display: block, or should I always use display: flex?我应该使用 display: block，还是应该始终使用 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 吗？
这是一些人喜欢的选项。

标签： html css flexbox

【解决方案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'，因为它更快。

【讨论】：