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

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).

9 Likes

why do we use flexbox in website development ?

2 Likes

By example, when would you use flex and when grid?

4 Likes

As stated in this lesson, flexbox (or flexible box layout) makes positioning elements (whether individual or group elements) easier. It also makes it easy to lay your elements on your web page in a horizontal or vertical pattern

1 Like

You could use flex to style the page’s main navigational links, the top header, items that belong together. Flexbox makes it easy to align and re-arrange these items depending the size of the browser’s view-port. In all, Flexbox is great for one-dimensional layout.

1 Like