Los elementos de las cajas flexibles (flexbox) se pueden cambiar de tamaño para que se adapten al espacio disponible del elemento contenedor. Esto se consigue con algunas propiedades CSS a partir de las cuales se define un tamaño base para luego aplicar un factor de crecimiento o de decrecimiento.
Propiedades descritas en este artículo:
| Propiedad | Descripción |
|---|---|
flex-basis | Establece el tamaño inicial de los ítems. |
flex-grow | Indica el factor de crecimiento de los ítems. |
flex-shrink | Indica el factor de decrecimiento de los ítems. |
flex | Abreviatura de las tres propiedades anteriores. |
A diferencia de otras propiedades CSS relacionadas con las cajas flexibles, que se aplicaban directamente sobre el elemento contenedor, las propiedades descritas a continuación se aplican sobre los elementos hijos (ítems).
La propiedad ‘flex-basis’
La propiedad CSS flex-basis permite establecer el tamaño inicial de los ítems, que sirve de base. Su valor puede ser una unidad de longitud, ya sea relativa o absoluta, pero también puede ser una palabra clave.
Valores de la propiedad flex-basis:
| Valor | Descripción |
|---|---|
content | El tamaño viene determinado por su contenido. |
auto | El tamaño viene dado por las propiedades width y height. |
| tamaño | Indica el tamaño inicial en unidades de longitud. |
En el siguiente ejemplo vamos a provocar que el ancho de los ítems se ajuste al tamaño de su contenido, por tanto se adaptarán. Código CSS:
.base {
display: flex;
}
.item {
flex-basis: content;
}
Resultado:
ABCTEXTOE
El cuarto ítem contiene un texto más largo («TEXTO»), por lo tanto su caja contenedora es más ancha. Se ha marcado con el fondo dorado.
La propiedad ‘flex-grow’
Con la propiedad flex-grow se puede indicar un factor de crecimiento para los ítems. Funcionará mientras se haya definido un tamaño base con flex-basis y mientras los ítems cubran el tamaño total del contenedor. Los ítems crecerán hasta ocupar todo el espacio disponible en la dirección del eje principal. Se indicará un valor numérico en tanto por uno y no permite valores negativos.
Si todos los ítems tienen el mismo valor, el espacio se reparte a partes iguales.
.crecimiento {
display: flex;
}
.item_a {
flex-basis: content;
flex-grow: 1;
}
.item_b {
flex-basis: content;
flex-grow: 2;
}
Resultado:
ABCDE
Los ítems A, C y E (color salmón) tienen un factor de crecimiento de 1, mientras que los ítems B y D (dorado) tienen un factor de crecimiento es 2.
La propiedad ‘flex-shrink’
La propiedad flex-shrink permite indicar un factor de decrecimiento para los ítems. Funcionará mientras se haya definido un tamaño base con flex-basis y mientras los ítems no cubran el tamaño total del contenedor.
El factor será un valor numérico en tanto por uno, sin permitir valores negativos. En este sentido, cuanto mayor sea el valor, más se reducirá el tamaño del ítem. Los ítems decrecerán proporcionalmente según el factor indicado.
Si todos los ítems tienen el mismo valor, el espacio se reparte a partes iguales.
.decrecimiento {
display: inline-flex;
}
.item_c {
flex-basis: 100px;
flex-shrink: 6;
}
.item_d {
flex-basis: 100px;
flex-shrink: 2;
}
Resultado:
ABCDE
Los ítems A, C y E (color salmón) tienen un factor de decrecimiento de 6, mientras que los ítems B y D (dorado) lo tienen de 2.
La propiedad ‘flex’
La propiedad CSS flex es una abreviatura (shorthand) que unifica las tres propiedades siguientes: flex-grow, flex-shrink y flex-basis. Por lo tanto, esta propiedad admite tres parámetros que son los valores correspondientes a las tres propiedades mencionadas, manteniendo el orden indicado.
Si se introduce un único valor sin unidades, se estará indicando el factor de crecimiento (flex-grow). Si se introduce un valor con unidades, será el tamaño base (flex-basis). Dos valores sin unidades: flex-grow y flex-shrink. Su valor por defecto es initial, equivalente a 0 1 auto.
