43 votos

¿Qué significa flex: 1?

Todos lo sabemos, la propiedad flex es una abreviatura de la flex-grow , flex-shrink y el flex-basis propiedades. Y su valor por defecto es 0 1 auto . Significa:

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

pero he notado, en muchos lugares flex: 1 se utiliza. ¿Es la abreviatura de 1 1 auto o 1 0 auto ? No puedo entender lo que significa? No consigo nada buscando en google.

42voto

blonfu Puntos 3834

Aquí está la explicación:

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

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

Por lo tanto, flex:1 equivale a flex: 1 1 0

41voto

Dhaval Chheda Puntos 2091

flex: 1 significa lo siguiente :-

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

Espero que esto ayude

Cuídate y feliz codificación

20voto

Obsidian Puntos 2211

TENGA CUIDADO

En algunos navegadores:

flex:1; no igual flex: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.
  • flexión-encogimiento Un número que especifica cuánto se encogerá el elemento en relación con el resto de los elementos 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.

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

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

La base de flexión se ignora y sólo se aplican las funciones de flexión y contracción.

EJEMPLO

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

Esto puede parecer a primera vista correcto, sin embargo, si la unidad aplicada del contenedor está anidada, ¡espera lo inesperado!

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

COMPATIBILIDAD

Hay que señalar que esto falla porque estos navegadores no se han adherido a la especificación .

  • Firefox - ✓
  • Borde - ✓
  • Cromo - x
  • Valiente - x
  • Ópera - x
  • IE - (lol, funciona sin unidad de longitud pero no con una).

6voto

Bipon Biswas Puntos 4395

La propiedad CSS flex especifica cómo crecerá o se encogerá un elemento flex para ajustarse al espacio disponible en su contenedor flex. Es una propiedad abreviada que establece flex-grow, flex-shrink y flex-basis.

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

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

flex: 1 1;

/* Tres valores: flex-grow | flex-shrink | flex-basis */

flex: 1 1 10%;

auto

El artículo se dimensiona según sus propiedades de anchura y altura, pero crece para absorber cualquier espacio libre extra en el contenedor flexible, y se encoge hasta su tamaño mínimo para ajustarse al contenedor. Esto equivale a establecer "flex: 1 1 auto".

inicial

Este es el valor por defecto. El elemento se dimensiona según sus propiedades de anchura y altura. Se encoge a su tamaño mínimo para ajustarse al contenedor, pero no crece para absorber cualquier espacio libre extra en el contenedor flexible. Esto equivale a establecer "flex: 0 1 auto".

ninguno

El elemento se dimensiona según sus propiedades de anchura y altura. Es totalmente inflexible: no se encoge ni crece en relación con el contenedor flexible. Esto equivale a establecer "flex: 0 0 auto".

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X