Si te encuentras con algún detalle que no entiendes puedes dejarlo en los comentarios y trataremos de ayudarte rápidamente.
Solución:
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%.
Aquí está la explicación:
https://www.w3.org/TR/css-flexbox-1/#flex-common
doblar:
Equivalente a flexionar:
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 artículos en el contenedor flexible usan este patrón, sus tamaños serán proporcionales al factor flexible especificado.
Por lo tanto flex:1 es equivalente a flex: 1 1 0
TEN CUIDADO
En algunos navegadores:
flex:1;no es igual flex:1 1 0;
flex:1; = flex:1 1 0n; (donde norte es una unidad de longitud).
- crecimiento flexible: Un número que especifica cuánto crecerá el artículo en relación con el resto de los artículos flexibles.
- flexión-encogimiento 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”, “inherit” o un número seguido de “%”, “px”, “em” o cualquier otra unidad de longitud.
Él key El punto aquí es que la base flexible requiere un unidad de longitud.
En Chrome por ejemplo flex:1 y flex:1 1 0 producir 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
Flex base 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
FLEX 1
FLEX 1 1 0%
COMPATIBILIDAD
Cabe señalar que esto falla porque algunos navegadores no han cumplido con la especificación.
Navegadores que usan la especificación completa de flex:
- Firefox – ✓
- Borde – ✓ (Lo sé, yo también me sorprendí).
- cromo-x
- valiente – x
- Ópera – x
- ES DECIR – (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.
Te mostramos las reseñas y valoraciones de los lectores
Si guardas algún aprieto o capacidad de aclararse nuestro ensayo te recomendamos ejecutar una apostilla y con placer lo analizaremos.