Why shouldn't flexbox be used for the layout of an entire page?


#1

Question

Why shouldn’t flexbox be used for the layout of an entire page?

Answer

Flexbox was not designed to use as a grid system for our websites and web applications - that’s where CSS Grid comes in handy. That said, many developers use flexbox for their entire page layout (just because they can).

However, we should re-think using flexbox for our entire page layouts as its main purpose is to lay out components of a web page/application in a single horizontal or vertical direction. With flexbox the content determines the layout, for example: if we don’t have enough space in a flex container for our content, we can have our flex items wrap to the next line. We also usually need many nested <div> elements to use as containers if we want our entire layout to use flexbox and this can make our HTML difficult to read (both as a developer reading the HTML or for assistive technology, like a screen reader).