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 inicialas each of the properties of the shorthand:
Applies toflex items, including in-flow pseudo-elements
Heredableno
Valor calculadoas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

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

Sintaxis

/* 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 (en-US) 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
CSS Flexible Box Layout Module Level 1
# flex-property

Compatibilidad de Navegadores

BCD tables only load in the browser

Ver también