我是否应该使用display:block,或者我应该总是使用display:flex?
我最近一直在学习很多关于flexbox的知识,但有一点我仍然不清楚。 我应该总是将display
设置为flex
/ inline-flex
,还是有利于使用block
/ inline-block
?
我发现了几篇有用的文章,但没有一篇文章回答这个具体问题。 本文解释了使用flexbox的不同display
值之间的差异,而不是将它们与display: block
进行比较。 这个问题确实表明使用block
/ inline-block
已经过时,但我还没有看到任何其他来源证实这一点。 如果display: block
现在已经过时了,我会认为它会对W3 Schools发表这样的看法(不是说它们总是正确的,但它们似乎是一个很好的来源)。
有几个答案提到了这篇文章,但同样,它没有解释什么时候应该使用display: block
来代替display: flex
(如果有的话)。
其他回答类似问题的文章是这一个,也是这个。 虽然两者都是很棒的文章。 第一个给两者带来了优点和缺点,但是flexbox的唯一显着缺点是浏览器兼容性,这不是该项目的关注点。 后面的文章给出了我看到的最佳答案,即使用display: flex
允许元素保留flexbox属性。 这是否意味着如果它不需要flexbox属性,我应该只使用display: block
? 要么有性能影响,要么我总是使用display: flex
?
他们是不同的盒子布局模型。 所有这些都是有效的,并且每一个都有它自己的优点和缺点。
block
和inline-block
都不是过时的。 您仍然可以使用它们,并且CSS工作组仍在添加可以使用这些旧布局的新功能。
只有flexbox的显着缺点是浏览器的兼容性
这是错误的,flexbox有多个缺点,如缺少浮动和缺少多列:
Flex布局与块布局表面相似。 它缺少许多可以在块布局中使用的更复杂的以文本或文档为中心的属性,例如浮动和列。 作为回报,它可以获得简单而强大的工具,用于分发空间并按照Web应用程序和复杂网页经常需要的方式对齐内容。
这是否意味着如果它不需要flexbox属性,我应该只使用display: block
即使您不需要弯曲,Flexbox仍然可以工作。 但在这种情况下,我会劝阻它。 块布局更简单,这可能意味着浏览器可以更快地渲染它。
链接地址: http://www.djcxy.com/p/75621.html上一篇: Should I ever use display: block, or should I always use display: flex?