CODEWITHSUNDEEP
cssflexbox
Jan Swart
Jan Swart

Reputation: 7231

Why should Flexbox not be used for large scale layouts?

I read on two different websites (CSS Tricks and MDN) that Flexbox should not be used for large scale layouts. Why would this be seeing that it is being implemented in Bootstrap V4 as a grid system, as well as other Flexbox libraries?

Upvotes: 1

Views: 570

Answers (3)

Asons
Asons

Reputation: 87251

The major issue with flexbox is how it loads.

When the server stream content to the browser, it can progressively render it, and when the first item loads, it adjust it to the available space, and then, when the second item loads, it re-adjust, hence both being less performant and cause misalignment and element shifting.

So I recommend to use it where it is needed, not as a replacement of a well structured markup, since that is what a good and well behaved web site should have.

Here is one of many resources, shedding some light on this (and a recording that shows how it loads in comparison with a grid):

I made this answer a wiki, so feel free to contribute with both pro's and con's on whether to use flexbox as an overall layout solution

Upvotes: 1

Kinga
Kinga

Reputation: 386

A long time ago (4 years to be exact) in a galaxy far(on W3C Standards), far away.... Flexbox was an Candidate Recommendation stage for the first time:P

Browser was supporting it, even IE tried. Front-ends use it to build website and apps with it and nobody cared that it was only Candidate. Candidate always was changing in to proposals and in the end recommendations. Rarely some minor changes was made on that stage.

Then we discover that idea of flexbox was awesome but what we had on the table was pretty much no what we wanted. It was clumsy, not usfull and just wrong.

Huge decision made was. Flexbox get back to Working Draft.

That why, 4 years later everyone is afraid that it will happen again.

https://css-tricks.com/old-flexbox-and-new-flexbox/ https://css-tricks.com/using-flexbox/

Upvotes: 1

Yathi
Yathi

Reputation: 1041

I suspect it is mostly because that is the intended purpose of Flexbox and Grid Layout. As mentioned in the link:

Grid layout doesn’t have content structure, therefore enabling a wide variety of layouts not possible in tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Also Flexbox and Grid Layout are both at the Candidate Recommendation stage. The other thing you should remember is that Bootstrap V4 is still in alpha.

Upvotes: 2

Related Questions