Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Carlos Quivera
6,917 PointsFlexbox or floats?
I just started learning about Flexible boxes, they are very easy to use and they seem to be good for page layout, but I've been reading that Flexbox is not widely used because of it's lack of support on popular browsers.
I suppose the video about Flexboxes is a bit outdated since Guil uses a vendor prefix for Chrome, but it is not necessary anymore, does that means is there better support now?
I understand that floats could be better in specific circumstances, but for general layout, which one do you think is better?
Thanks.
3 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsYou can look at caniuse.com and compare browser compatibility with how it is now to what the videos say in CSS foundations.
I wonder if Guil Hernandez can tell us if there's any planned update to the CSS Foundations course in the not too distant future, but to be honest I don't envy him the task as that is one big course. :)
So for now, look at caniuse.com, look at the usage statistics and judge for yourself. :-)
Joseph Wagner
Android Development Techdegree Graduate 27,137 PointsHi Carlos,
Guil did another unit on them here as well: http://teamtreehouse.com/library/css-layout-techniques
If I recall correctly you just need the vendor prefix for Safari and IE9 and earlier, no support for Opera mini, but in this course they teach you how to use Modernizr browser detection to create fallbacks which is useful. [http://modernizr.com/]
There's also some good information on support and fallbacks here. [http://css-tricks.com/snippets/css/a-guide-to-flexbox/]
Good luck!
Carlos Quivera
6,917 PointsHi Joseph,
I haven't seem those tutorials yet, I just started Flexbox and he said something about Modernizr but he didn't explain how it worked, I'm now looking forward to start on the CSS Layout tutorial. :)
That guide seems perfect to complement Guil's introduction to Flexbox, I appreciate the link!
Thank you!
Kevin Korte
28,148 PointsI'll tell you where I am at. If I'm building a new website today, the first every CSS layout will be with floats still. If I was starting a massive update for a website, I'd likely move the flexbox and have the old CSS float layout as my fallback using Modernizr and YepNope to decide that for me.
To handle any Flexbox prefixing I'd just use Autoprefixer which uses info from caniuse.com to decided what needs prefix support and what doesn't.
Carlos Quivera
6,917 PointsThanks Kevin! Autoprefixer seems really useful, I was worrying a bit about vendor prefixes. :)
Kevin Korte
28,148 PointsAutoprefixer is my go-to. The default settings for it are sensible, but it can be customized to target certain browsers or support if you need it.
Daniel Elebash
91 PointsI would also like to use flex-box, but I ran across this article saying to not use flex-box for overall page layout because of performance.
Is this still true or is it ok to use flex-box for overall page layout?
Thanks.
Kevin Korte
28,148 PointsThat link is dead, so I couldn't see the specifics, but this would be the first article that I've seen that talks about flex box having performance issues for page layout; 'cause it's exactly was flexbox was developed to do.
I'd have to see some pretty serious and conclusive benchmark testing without variable to believe it, and I just don't think I'll see that.
I'd have no problem using flexbox as far as performance goes. Browser support could be a different story though.
Daniel Elebash
91 PointsKevin, sorry about the bad link, I have updated it. The article does show a bid difference in loading. If you get a chance take a look.
Thanks.
Kevin Korte
28,148 PointsI get what he is saying now... I think, just the way he is saying it is I feel a bit misleading, or dramatic.
He's comparing flexbox to the CSS grid. Truthfully, I know nothing about the CSS grid spec, expect for you clearly can't use it.
http://caniuse.com/#search=grid
Overall, I would want more hard data. I'd like to see acutal numbers from a dev inspector to see load times. It's true that grids might load faster, but today his argument is mute since grids is unusable.
I think when you compare speeds between flexbox and traditional floats, you'll find there isn't much a difference in performance. Overall, I truly feel flexbox is a step above traditional floated layouts and would not have a problem using flexbox for layouts.
CSS grids may be the way in the future, but it looks like it'll be awhile.
I think today that authors argument is comparing apples to oranges. Something you can use today vs something you can't use today.
Treehouse doesn't seem to thing flexbox is too bad either.
http://blog.teamtreehouse.com/flexbox-next-generation-css-layout-arrived
Daniel Elebash
91 PointsKevin, thanks for the explanation!
Carlos Quivera
6,917 PointsCarlos Quivera
6,917 PointsWhoa, that's one amazing website, I appreciate it!
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsNo problem. :-) The website itself has been updated since Guils videos came out but it's basically the same thing. :)