CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Matthew McKenzie
Matthew McKenzie
3,959 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
Jamie Reardon
Front End Web Development Techdegree Student 12,522 Points

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.