flex
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
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.

Sintaxis
--------


```css
/\* 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
-------


```css
#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;
}
```



```html
<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>
```


```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```


```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

### Resultado

Especificaciones
----------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Usar las cajas felxibles de CSS