Definición de .flex utilizado en CSS
La propiedad .flex es una subproperiedad del módulo de diseño de caja flexible.
Caso de empleo : propiedad CSS flex
Si quieres utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de la siguiente manera:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
.flex-item {
/* this */
flex: 1 100px;
/* is the same as */
flex-grow: 1;
flex-basis: 100px;
/* and it leaves the flex-shrink property alone, which would be */
flex-shrink: inherit; /* defaults to 1 */
}Otro ejemplo más avanzado de .flex es el siguiente de CODEPEN:
Sintaxis de .flex en CSS
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| Un número que especifica cuánto crecerá el artículo en relación con el resto de los artículos flexibles | ||
| Un número que especifica cuánto se encogerá el artículo en relación con el resto de los artículos flexibles | ||
| La longitud del artículo. Valores legales: "auto", "inherit" o un número seguido de "%", "px", "em" o cualquier otra unidad de longitud | ||
| auto | Igual que 1 1 automático. | |
| inicial | Igual que 0 1 automático. | |
| ninguna | Igual que 0 0 automático. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .flex
Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| flex-basis | 29.0 21.0 -webkit- | 11.0 | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
