O que significa flex: 1?

flex: 1 significa o seguinte:

flex-grow : 1; // this means that the div will grow in same proportion as the window-size
flex-shrink : 1; // this means that the div will shrink in same proportion as the window-size 
flex-basis : 0; // this means that 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%.

TEM CUIDADO

Em alguns navegadores:

flex:1; não igual flex:1 1 0;

flex:1; = flex:1 1 0n; (em que N é uma unidade de comprimento.

• Flex-grow: um número que especifica quanto o item irá crescer em relação ao resto dos itens flexíveis.
• Flex-encolher {[19] } um número que especifica quanto o item irá encolher em relação ao resto dos itens flexíveis
• base flex {[19] } o comprimento de item. Valores jurídicos: "auto", "herdar", ou um número seguido de"%", "px", " em " ou qualquer outra unidade de comprimento.

O ponto chave aqui é que a base flex requer uma unidadede comprimento .

Em cromado, por exemplo flex:1 e flex:1 1 0 produzem resultados diferentes. Na maioria das circunstâncias pode parecer que {[3] } está funcionando, mas vamos examinar o que realmente acontece:

A base Flex é ignorada e apenas a base flex-grow e flex-shrink são aplicado.

Exemplo

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

Isto pode, à primeira vista, parecer ok no entanto, se a unidade aplicada do contentor estiver aninhada; espere o inesperado!

Tente este exemplo no cromo

.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

Note-se que esta falha porque estes navegadores não conseguiram aderir à especificação .

• Firefox - ✓
• Edge - ✓
• cromado-x
• Bravo x
• Opera-x
• IE - (lol, funciona sem unidade de comprimento, mas não com uma.)

A propriedade flex CSS especifica como um item flex irá crescer ou diminuir de modo a caber o espaço disponível no seu recipiente flex. Esta é uma propriedade abreviada que coloca flex-grow, flex-shrink, e flex-basis.

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex : 2;

/ * dois valores: flex-grow | flex-shrink * /

flex: 1 1;

/ * três valores: flex-grow | flex-shrink / flex-basis * /

flex: 1 1 10%;

Auto

O item é dimensionado de acordo com as suas propriedades de largura e altura, mas cresce para absorver qualquer item extra livre espaço no recipiente flex, e encolhe para o seu tamanho mínimo para caber o recipiente. Isto é equivalente à configuração "flex: 1 1 auto".

Inicial

Este é o valor por omissão. O item é dimensionado de acordo com suas propriedades de largura e altura. Ele encolhe para o seu tamanho mínimo para caber o recipiente, mas não cresce para absorver qualquer espaço livre extra no recipiente flex. Isto é equivalente à configuração "flex: 0 1 auto".

Nenhuma

O item está dimensionado de acordo com a sua largura e altura propriedades. É totalmente inflexível: não encolhe nem cresce em relação ao recipiente flex. Isto é equivalente à configuração "flex: 0 0 auto".