0

I have the below html code:

<div id="main">
  <div>One</div>
  <div>Two</div>  
  <div>One, Two Three</div>
</div>

When I use 

#main div {
 flex: 1;
 border: 1px solid;
}

All divs are equispaced. But when I expand it, 

#main div {
 flex-grow:1;
 flex-shrink:1;
 flex-basis: auto;
 border: 1px solid;
}

the divs are not equispaced. Am I missing something here?

dippas
  • 58,591
  • 15
  • 114
  • 126
codingsplash
  • 4,785
  • 12
  • 51
  • 90
  • 1
    The dupe link clarifies this quite well: https://stackoverflow.com/questions/48522388/reasons-to-use-flex-1 – Asons Jan 31 '18 at 10:32

1 Answers1

1

When using flex:1 it is the shorthand for flex: 1 1 0 (in IE - is flex:1 1 0px) and not flex: 1 1 auto

Here is why:

Basic Values of flex

flex: <positive-number>

Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

dippas
  • 58,591
  • 15
  • 114
  • 126
  • But if flex-basis default is 'auto' then why does it become 0px in shorthand? If possible, can you elaborate how the flex shorthand works? – codingsplash Jan 31 '18 at 10:28
  • 1
    @codingsplash added an explanation – dippas Jan 31 '18 at 10:34
  • 1
    I noticed you got an unjust downvote, which unfortunately is quite common ... and just wanted to say +1 from me because of that, but I did close this as a dupe though :) – Asons Jan 31 '18 at 11:09