Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Flex 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

alt text

alt text

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

The 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.

Sureā€¦ 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.)