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 ?
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.
链接地址: http://www.djcxy.com/p/75622.html