What does flex 1 mean

Question

As we all know  the flex property is a shorthand for the flex-grow  flex-shrink  and the flex-basis properties  Its default value is 0 1 auto  which means  flex-grow  0  flex-shrink  1  flex-basis  auto    but I ve noticed  in many places flex  1 is used  Is it shorthand for 1 1 auto or 1 0 auto  I can t understand what it means and I get nothing when I google

User · Accepted Answer

Here is the explanation   https   www w3 org TR css-flexbox-1  flex-common     flex   lt positive-number gt        Equivalent to flex   lt positive-number gt  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    Therefore flex 1 is equivalent to flex  1 1 0

User · Answer

In Chrome Ver 84  flex  1 is equivalent to flex  1 1 0   The followings are a bunch of screenshots

User · Answer

BE CAREFUL  In some browsers   flex 1  does not equal flex 1 1 0   flex 1    flex 1 1 0n   where n is a length unit     flex-grow    A number specifying how much the item will grow relative to the rest of the flexible items  flex-shrink  A number specifying how much the item will shrink relative to the rest of the flexible items flex-basis   The length of the item  Legal values   auto    inherit   or a number followed by       px    em  or any other length unit    The key point here is that flex-basis requires a length unit   In Chrome for example flex 1 and flex 1 1 0 produce different results  In most circumstances it may appear that flex 1 1 0  is working but let s examine what really happens   EXAMPLE  Flex basis is ignored and only flex-grow and flex-shrink are applied   flex 1 1 0    flex 1 1    flex 1   This may at first glance appear ok however if the applied unit of the container is nested  expect the unexpected    Try this example in CHROME   x000D   x000D   Wrap  x000D    padding 10px  x000D    background   333  x000D    x000D   Flex110x   Flex1   Flex110   Wrap   x000D    display  -webkit-flex  x000D    display  flex  x000D    -webkit-flex-direction  column  x000D    flex-direction  column  x000D    x000D   Flex110   x000D    -webkit-flex  1 1 0  x000D    flex  1 1 0  x000D    x000D   Flex1   x000D    -webkit-flex  1  x000D    flex  1  x000D    x000D   Flex110x  x000D    -webkit-flex  1 1 0   x000D    flex  1 1 0   x000D    x000D  FLEX 1 1 0 x000D   lt div class  Wrap  gt  x000D     lt div class  Flex110  gt  x000D       lt input type  submit  name  test1  value  TEST 1  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D  FLEX 1 x000D   lt div class  Wrap  gt  x000D     lt div class  Flex1  gt  x000D       lt input type  submit  name  test2  value  TEST 2  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D  FLEX 1 1 0  x000D   lt div class  Wrap  gt  x000D     lt div class  Flex110x  gt  x000D       lt input type  submit  name  test3  value  TEST 3  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    COMPATIBILITY  It should be noted that this fails because some browsers have failed to adhere to the specification    Browsers that use the full flex specification    Firefox -    Edge -    I know  I was shocked too   Chrome - x Brave - x Opera - x IE -  lol  it works without length unit but not with one       UPDATE 2019  Latest versions of Chrome seem to have finally rectified this issue but other browsers still have not   Tested and working in Chrome Ver 74

User · Answer

flex  1 means the following   flex-grow   1       The div will grow in same proportion as the window-size        flex-shrink   1     The div will shrink in same proportion as the window-size  flex-basis   0      The div does not have a starting value as such and will                       take up screen as per the screen size available for                      e g - if 3 divs are in the wrapper then each div will take 33

[css] What does flex: 1 mean?

Examples related to css

Examples related to flexbox