O que significa flex: 1?

Como todos sabemos, a flexpropriedade é um atalho para o flex-grow, flex-shrinke as flex-basispropriedades. Seu valor padrão é 0 1 auto, o que significa

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

mas eu notei que em muitos lugares flex: 1é usado. É uma abreviação de 1 1 autoou 1 0 auto? Não consigo entender o que isso significa e não recebo nada quando busco no Google.

Aqui está a explicação:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <número-positivo>
Equivalente a flex: <número-positivo> 1 0. Torna o item flexível flexível e define a base flexível como zero, resultando em um item que recebe a proporção especificada de espaço livre no contêiner flexível. Se todos os itens no contêiner flexível usarem esse padrão, seus tamanhos serão proporcionais ao fator flexível especificado.

Portanto, flex:1é equivalente aflex: 1 1 0

flex: 1 significa o seguinte:

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%.

SEJA CUIDADOSO

Em alguns navegadores:

flex:1; não é igualflex:1 1 0;

flex:1;= flex:1 1 0n;(onde n é uma unidade de comprimento).

• flex-grow: um número que especifica quanto o item crescerá em relação ao restante dos itens flexíveis.
• flex-shrink Um número que especifica quanto o item será reduzido em relação ao restante dos itens flexíveis
• base flexível O comprimento do item. Valores legais: "auto", "herdar" ou um número seguido por "%", "px", "em" ou qualquer outra unidade de comprimento.

O ponto principal aqui é que a base flexível requer uma unidade de comprimento .

No Chrome, por exemplo, flex:1e flex:1 1 0produz resultados diferentes. Na maioria das circunstâncias, pode parecer que flex:1 1 0;está funcionando, mas vamos examinar o que realmente acontece:

EXEMPLO

A base flexível é ignorada e apenas a flexão e contração flexíveis são aplicadas.

flex:1 1 0;= flex:1 1;=flex:1;

Isso pode parecer à primeira vista ok, no entanto, se a unidade aplicada do contêiner estiver aninhada; espere o inesperado!

Experimente este exemplo em CHROME

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

COMPATIBILIDADE

Deve-se notar que isso falha porque alguns navegadores não aderiram à especificação .

Navegadores que usam a especificação flexível completa:

• Firefox - ✓
• Edge - ✓ (Eu sei, fiquei chocado também.)
• Chrome - x
• Valente - x
• Opera - x
• IE - (lol, funciona sem unidade de comprimento, mas não com uma.)

ATUALIZAR 2019

As versões mais recentes do Chrome parecem ter finalmente corrigido esse problema, mas outros navegadores ainda não o fizeram.

Testado e funcionando no Chrome Ver 74.