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 Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Posted by Matthew McKenzie
Matthew McKenzie
4,450 Points

Dual Column Flex Box

So, I was watching the Smarter Layouts and learning about flex-grow and flex-basis. I tried using the flex-grow to 1 and flex-basis at 50% and it was a one layout column instead of two. What works better for a two column layout percents or Pixels? How you would you layout a two columns layout for desktop using Flex box?

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Setting the flex-grow property to 1 will make the flex-item grow into any extra available space inside the flex-container. Did you make sure that both columns share this property and value? This should make two equal columns if you have set it up correctly.

The flex-basis property assigns an initial width for the flex-items. 50% will be the initial width, but if you have set a flex-grow property, then the flex-items will grow into the available space of the flex-container. Setting the flex-basis property in conjunction with flex-wrap set to wrap will ensure that when the flex-container shrinks, the flex-items will maintain that 50% size and will wrap to the next line if there is no space available at the current flex-container width for the flex-items to display on the same line.

Percentages are always relative to the something, in this case, the flex-container since its the parent element. They are more fluid. Pixels are precise.