Comment by xboxnolifes
4 days ago
I think it was advised a bit too early, but ever since flexbox entered the scene, tables for page formatting became irrelevant.
And just in case, nobody ever said tables were dead. Tables were declared bad practice for page formatting, not for tabular data.
Do not use flexbox for page layout. It invites nested flexboxes, which eats your reflow performance.
Use grid instead.
Not the first time I hear of this, but I thought it was a blink-specific issue when using severely nested structures (e.g., html pages written using visual editors like Elementor or Webflow)?
For quite a while, I had to keep using flexbox instead of grids, because grids killed performance, funnily enough. That seems to have been rectified with modern browsers though, funnily enough.
Flexbox is great and having nested flexboxes is also great. It makes building responsive pages a bliss. Learn it if you are having trouble with it, it is really not that difficult. Grids are much more error prone and allow for much less flexibility.
The issue with nested flexboxes is that flexbox containers size their content to match the container.
Therefore, to calculate the size of an item, the sizes of other items need to be known. Now, if one of the items is a flexbox, its item sizes cannot be known until the previous flexbox is laid out.
Of course, properly using flex-grow and flex-shrink can optimize that calculation, but what about deeper nested flexboxes?
Useful insight: any sources?
From 2014 https://jakearchibald.com/2014/dont-use-flexbox-for-page-lay...
5 replies →
Even for layout, CSS took a long time to catch up with tables in some areas. Tables were not designed for layout, but there's a lot of aspects to them which are easier to grasp and work with than trying to get the same effect with early CSS.