flex

Resumen

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

Valor inicial	as each of the properties of the shorthand: `flex-grow`: `0` `flex-shrink`: `1` `flex-basis`: `auto`
Applies to	flex items, including in-flow pseudo-elements
Heredable	no
Valor calculado	as each of the properties of the shorthand: `flex-grow`: como se especifica `flex-shrink`: como se especifica `flex-basis`: as specified, but with relative lengths converted into absolute lengths
Animation type	as each of the properties of the shorthand: `flex-grow`: a number `flex-shrink`: a number `flex-basis`: a length, percentage or calc();

Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

Sintáxis

/* 0 0 auto */
flex: none;

/* Un valor, número sin unidades: flex-grow */
flex: 2;

/* Un valor, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Dos valores: flex-grow | flex-basis */
flex: 1 30px;

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

/* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Valores globales */
flex: inherit;
flex: initial;
flex: unset;

Valores

<'flex-grow'>: Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
<'flex-shrink'>: Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
<'flex-basis'>: Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
none: Esta palabra clave se computa a 0 0 auto.
Sintaxis normal

flex = 
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Ejemplo

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}

<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

Resultado

Especificaciones

Specification	Status	Comment
CSS Flexible Box Layout Module La definición de 'flex' en esta especificación.	Candidate Recommendation	Initial definition

Compatibilidad de Navegadores

BCD tables only load in the browser

Ver también

Usar las cajas felxibles de CSS

flex

Sintaxis normal