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
Michael Trilford
7,232 PointsFlex Box and fixed widths for the 960px grid.
After learning about Flexbox, I had to understand how it would work for fixed widths and how I would go ahead and make a replica of the 960 grid, without using floats.
At first I thought I would use:
-webkit-flex: 1; to -webkit-flex: 12; wrapped in a 960px wrapper. However, the columns would not match up, when compared to the 960px grid.
I then used percentage widths for the columns, without the need of having float: left; on the .col class. Having the display: -webkit-flex; on the parent, this still arranges the columns correctly, without the parent collapsing.
Great.
http://codepen.io/trilm/pen/rajFA
If all you want from Flexbox is a nice layout compared to a floated layout, then I can't see why we can't go ahead and start using it.
1 Answer
Dave Evans
13,160 PointsThe ultimate reason to still use float is that flexbox isn't supported in all browsers. Until we have no need to develop for the non-compatible browsers, we have to accommodate to everyone that might potentially visit the site.
Michael Trilford
7,232 PointsMichael Trilford
7,232 PointsSure… So if you check my markup on the link. You will see I still fallback, as we still need to develop for older browsers. More so in New Zealand as users are still on ie6.
I love flex box as the height of columns are the same height (first image, which still has float applied however.)