2

I'm just getting familiarized with Flex box and when i apply flex-grow:1 to a grouping of columns it seems to be making the column height grow equally but not the widths which is my goal.

If i'm understanding this, the default flex-direction is "row"...so in theory shouldn't the widths all be equal. 

.flex{display:flex}
.flex div{flex-grow:1}

/*Just for visual separation*/
.flex div:nth-child(odd){background-color:#ccc}

Here is a Codepen of my example http://codepen.io/dougmays/pen/dPWQdp

thanks

hippietrail
  • 15,848
  • 18
  • 99
  • 158
dougmays
  • 96
  • 1
  • 9

1 Answers1

5

As you have in the codepen

This doesn't work

.flex{display:flex;}
.flex div{flex-grow:1}

but this does work

.flex2{display:flex;}
.flex2 div{flex:1}

The difference is that when you set flex:1 you also set flex-basis to 0px (the default).

In the first example, lacking a flex-basis value, the elements grow uniformly starting from their current width. Since this is different, the end result is also different

vals
  • 61,425
  • 11
  • 89
  • 138
  • Awesome thank you! I actually google'd some more after this and found that Flex:1 works but didnt know the explanation. So in theory if i wanted to write more code This would also work: flex-grow:1; flex-basis:0px – dougmays Jan 21 '15 at 17:47