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.

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

Ver también

Usar las cajas felxibles de CSS