9

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?

Community
  • 1
  • 1
Taylor
  • 733
  • 7
  • 18

2 Answers2

10

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.

Oriol
  • 274,082
  • 63
  • 437
  • 513
1

'flex' is created for using to easy and better responsive designs, so it need more render calculate time, if you don't need responsive design it is better to use 'block' because it is more fast.

Abolfazl Miadian
  • 3,099
  • 2
  • 19
  • 15