Taylor Taylor - 3 months ago 7
CSS Question

Should I ever use display: block, or should I always use display: flex?

I have recently been learning a lot about flexbox, but one thing is still unclear to me. Should I always set the

display
to
flex
/
inline-flex
, or is it ever advantageous to use
block
/
inline-block
?

I have found several useful articles, but none of the articles answer this specific question. This article explained the difference between the different
display
values using flexbox instead of comparing them to
display: block
. The question did state that using
block
/
inline-block
was outdated, but I haven't seen any other sources confirming that. If
display: block
was now outdated, I would have thought it would say so on W3 Schools(not that they are always correct, but they seem to be a good source).

Several answers have mentioned this article, but again, it doesn't explain when
display: block
should be used instead of
display: flex
(if ever).

Other articles answering similar questions are this one and this one. While both are great articles. The first one gave advantages and disadvantages to both, but the only significant disadvantage of flexbox was browser compatibility which isn't a concern for this project. The latter article gave the best answer I saw which was that using
display: flex
allows the element to retain flexbox properties. Does that mean that if it doesn't need flexbox properties I should just use
display: block
? Does either have a performance impact, or should I just always use
display: flex
?

Answer

They are different box layout models. All are valid, and each one has its own advantages and disadvantages.

Neither block nor inline-block are outdated. You can still use them, and the CSS working group is still adding new features that you can use with these old layouts.

only significant disadvantage of flexbox was browser compatibility

That's false, flexbox has multiple disadvantages, like lack of floating and lack of multicolumns:

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.

Does that mean that if it doesn't need flexbox properties I should just use display: block

Flexbox may still work, even if you don't need flexing. But in that case I would discourage it. Block layout is simpler, which might mean browsers can render it faster.

Comments