Having started out with Bootstrap, I briefly experimented with my own simple grid layout, before recently falling in love with flexbox. I wont say why I love it - if you’ve used it you will already know the many reasons (perfect centring with margin: auto !).
However, I’ve also read in several places, without proper explanation, that flexbox is not well suited to larger scale design. Finally I came across this article Don’t use flexbox for overall page layout. The article’s main point is that because of the way flexbox loads page content it is more likely to ‘jump around’ (see the video). As someone with a poor internet connection this is one of my pet peeves, and I don’t want users of my websites with slower connections to have this problem.
On the other hand I love flexbox and was planning on using it for overall page design!
What do you think? What do you use? A combination of grid and flexbox? If so what grid do you use? What about Bootstrap 4, which incorporates some flexbox like behaviours?
Links to good guides on the best approach and how to implement would also be appreciated; right now I’m really not sure on which to focus. This question is important to me right now as I have just volunteered myself to rebuild someone’s old website to make it responsive, and I was planning on using flexbox without a grid.
(When I say grid I mean it in the abstract - I don’t mean the not production ready CSS Grid.)
That guy seems to have no idea what he’s doing with flexbox. If he’s having trouble with flex box it’s because he’s not doing it right, or maybe back in 2014 the browser implementations were still not perfect. Take a look in my portfolio, everything in there is flexbox. I have flex rows sitting in flex columns inside flex panels that all change on a media query. and as far as i know, nothing jumps, no bugs, nothing. And i’,m a noob.
The only reason grid works in bootstrap is because they polly-filled the crap out of it. Grid is unsupported in most browsers, and bootstrap 4 steers you towards flex anyway!
Anyway, personally I would get good at flexbox, cos i’m a bit of a fanboy, but I don’t think we can rule out Bootstrap either because, depending on what you end up doing, your inevitably going to have to work with it at some point.
The flex, in BS4, is in fact flexbox btw
EDIT… i just noticed the thread title… not sure if I have wisdom yet!
@MARKJ78 Nice portfolio!
I’m currently on a reasonable speed connection, but even when I used chrome tools to throttle the speed I didn’t find any jumping on load.
According to this CSS trick article there are multiple potential causes of content jumping; so perhaps flexbox really isn’t the main culprit. Are there any other reasons to not use flexbox for overall page layout?
I’ve never heard not to use personally. I mean there were some compatibility issues when it was introduced, but the only one i have run into is the vertical centering one in ie11. I never test below IE 11 to be honest as Microsoft doesn’t support it.
It’s just a few lines of CSS and has browser support so I don’t see why not to use it if you like it. Of course if you sack off Bootstrap altogether you will have to learn how to make sliders and accordions yourself, but thats not such a bad thing if you have the time and inclination to do that. You can also mix and match it with Bootstrap too, so you could use bootsrap classes for the gadgets like menus but use flexbox for the layout.
Just read the CSS article too, I’m getting the impression that using flexbox has maybe highlighted other errors throughout his website or app.
Like when I turned on strict mode (after reading YDKJS) and created quite a few bugs in my code. - I didn’t go write an article entitled “Don’t use strict mode - it will break your code” - I wen’t and figured out what I should do about my buggy code.
I love flexbox but some of it renders weirdly on Edge and Safari. So it’s still not completely universal (although a lot of it works on every modern browser).
The Bootstrap grid is genuinely brilliant and I’d use it for regular websites and use flexbox for smaller things. If you don’t want to load Bootstrap in your project because of its size look at Skeleton, which is a lot smaller and has a grid too.
Of course if you don’t really care about older browsers/mobile browsers not named Chrome or Firefox, I don’t see the issue with using flexbox for the entire page.
!).
