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
?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With