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

CSS CSS Layout Techniques Flexbox Layout Providing Fallbacks with Modernizr

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Why use Flexbox if you have to go back and code for browsers its not compatible with?

Seems like it would just be more efficient to use coding that are universally accepted...?

3 Answers

Juan Luna
Juan Luna
11,483 Points

If you're doing the Web Design track, don't worry too much about that; I was wondering the same a month ago but now I know that there are tools and frameworks that do all the ugly stuff for us, I mean, learn css as much as you can because that is the base for all tools like Sass, Less and all the others... (and you need to know what are they doing to the CSS file). For example, there is a Framework called Compass (the last course in Web Design track) that helps you implement every CSS3 properties in every web browser (if a property is not supported, it takes care about that).

Finally, I think that CSS3 properties are going to be accepted in every browser so look at the bright side: you`re learning things that are not completely implemented yet, so you are a step forward.

There is a paradigm in the web dev world known as 'graceful degradation' where the idea is that you create a site using the latest and greatest features but make sure the site can still be viewed properly in older browsers and those that don't support those features. So the answer to your question is that you use new techniques such as flexbox because it provides a level of control over the site layout that is both elegant and simple, but you provide a fallback to ensure that the website is not a complete wreck on older browsers. As Juan mentioned above, you can use frameworks like compass, bootstrap and foundation to take the tedium out of this work. The reason Treehouse tracks have you learn CSS manually before getting to these frameworks is because you need to understand what is going on under the hood in case you need to do some debugging.

But what's the point in it being simple and elegant if you still have to code the not as simple way using floats/inline blocks etc. Wouldn't it be less work and simpler to skip the flexbox step all together if you can achieve the same functionality and look without it?

My conclusion is that if you can achieve the exact same functionality without flexbox like they are in this video then there is no point in coding both. I assume the video is just showing us how to use both in case you are making a more complicated site that uses features that are available in flexbox but not older techniques?

It is probably because that in the future all browsers are gonna support all the flex functions. I actually think that IE supports it now.

Back when this video was made, already then some of the flex functions were supported, just not all of them. Yes, you had to add some extra coding to support the older browsers, but it wasn't like you had to rewrite the whole website without flex, since some flex functions did work. And flex should be the newest and the most simple way to layout your website.

Edit: Lol, just saw you wrote that comment 3 months ago. Guess it is all figured out by now then. q:

Pavle Lucic
Pavle Lucic
10,801 Points

Gina Bégin from the 2 years from now, you will use flex box as regular technique, and probably learning a new ones.... :)