¿Qué significa flex: 1?

Como todos sabemos, la flexpropiedad es una abreviatura para el flex-grow, flex-shrinky las flex-basispropiedades. Su valor predeterminado es 0 1 auto, lo que significa

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

pero he notado que en muchos lugares flex: 1se usa. ¿Es una abreviatura de 1 1 autoo 1 0 auto? No puedo entender lo que significa y no obtengo nada cuando busco en Google.

Aquí está la explicación:

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

flex: <number-positive>
Equivalente a flex: <positive-number> 1 0. Hace que el elemento flexible sea flexible y establece la base flexible en cero, lo que da como resultado un elemento que recibe la proporción especificada del espacio libre en el contenedor flexible. Si todos los elementos del contenedor flexible utilizan este patrón, sus tamaños serán proporcionales al factor flexible especificado.

Por flex:1lo tanto es equivalente aflex: 1 1 0

flex: 1 significa lo siguiente:

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

TEN CUIDADO

En algunos navegadores:

flex:1; no es igualflex:1 1 0;

flex:1;= flex:1 1 0n;(donde n es una unidad de longitud).

• flex-grow: un número que especifica cuánto crecerá el elemento en relación con el resto de los elementos flexibles.
• flex-shrink Un número que especifica cuánto se encogerá el artículo en relación con el resto de los artículos flexibles
• base flexible La longitud del artículo. Valores legales: "auto", "heredar" o un número seguido de "%", "px", "em" o cualquier otra unidad de longitud.

El punto clave aquí es que la base flexible requiere una unidad de longitud .

En Chrome por ejemplo flex:1y flex:1 1 0producir resultados diferentes. En la mayoría de las circunstancias, puede parecer que flex:1 1 0;está funcionando, pero examinemos lo que realmente sucede:

EJEMPLO

La base flexible se ignora y solo se aplican flex-grow y flex-shrink.

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

Sin embargo, esto puede parecer correcto a primera vista si la unidad aplicada del contenedor está anidada; ¡esperar lo inesperado!

Prueba este ejemplo en 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>

COMPATIBILIDAD

Cabe señalar que esto falla porque algunos navegadores no han cumplido con la especificación .

Navegadores que utilizan la especificación flexible completa:

• Firefox - ✓
• Edge - ✓ (Lo sé, también me sorprendió).
• Cromo - x
• Valiente - x
• Opera - x
• IE - (lol, funciona sin unidad de longitud pero no con una).

ACTUALIZACIÓN 2019

Las últimas versiones de Chrome parecen haber solucionado finalmente este problema, pero otros navegadores aún no lo han hecho.

Probado y funcionando en Chrome Ver 74.