Propiedad CSS flex
La propiedad CSS flex define cuánto deben crecer o encogerse los elementos dentro del contenedor. Encuentra ejemplos aquí.
La propiedad flex define los componentes de una longitud flexible. Es una abreviatura de las siguientes propiedades:
Los tres componentes son opcionales en la declaración abreviada. Cuando se omiten, flex-grow tiene el valor predeterminado de 1, flex-shrink tiene el valor predeterminado de 1, y flex-basis tiene el valor predeterminado de auto. Ten en cuenta que el factor flex-shrink se multiplica por el valor de flex-basis al distribuir el espacio negativo.
La propiedad flex es una de las propiedades de CSS3.
Esta propiedad forma parte del módulo Flexible Box Layout. Si no hay elementos flexibles, la propiedad flex no tendrá ningún efecto.
La palabra clave auto es equivalente a 1 1 auto. Dimensiona el elemento en función de las propiedades width/height. Si la propiedad de tamaño principal del elemento está configurada en auto, el tamaño del elemento flex se basará en su contenido.
La palabra clave initial es equivalente a 1 0 auto. Dimensiona el elemento en función de sus propiedades width/height (o su contenido si no están configuradas). Esto hace que el elemento flex sea inflexible cuando hay espacio libre disponible, y no se encogerá cuando no haya suficiente espacio. Las técnicas de alineación o los márgenes automáticos se utilizan para alinear los elementos flex a lo largo del eje principal.
La palabra clave none es equivalente a 0 0 auto. Dimensiona el elemento según las propiedades width y height. Es completamente inflexible.
Nota: Los valores iniciales de flex-grow y flex-shrink difieren de sus valores predeterminados cuando no están incluidos en la declaración abreviada flex, para poder adaptarse mejor a los casos de uso comunes.
| Valor inicial | 0 1 auto |
|---|---|
| Se aplica a | Elementos flex, incluidos pseudoelementos en flujo. |
| Heredada | No. |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.flex = "1"; |
Sintaxis
Sintaxis de la propiedad CSS flex
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Los valores pueden especificarse en cualquier orden. Al usar flex-basis, también puedes aplicar restricciones min-width o min-height para evitar que el elemento se encoja por debajo de un tamaño específico.
Ejemplo de la propiedad flex:
Ejemplo de la propiedad CSS flex
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex property example</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad flex con el valor "flex-grow":
Ejemplo de la propiedad CSS flex con el valor flex-grow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow example</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Ejemplo de la propiedad flex con el valor "flex-shrink":
Ejemplo de la propiedad CSS flex con el valor flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Patrones abreviados comunes
Algunos valores de flex aparecen con tanta frecuencia que vale la pena memorizarlos:
flex: 1(=1 1 0) — el elemento crece y se encoge libremente, comenzando desde un tamaño base de0. Aplícalo a cada hijo para dividir el contenedor en columnas de igual ancho, independientemente del contenido.flex: auto(=1 1 auto) — crece y se encoge, pero el tamaño inicial es el contenido/widthdel elemento. Los elementos comparten el espacio sobrante pero mantienen sus proporciones naturales.flex: none(=0 0 auto) — un elemento fijo e inflexible. Úsalo para una barra lateral o un botón que debe mantener su tamaño mientras los elementos hermanos flex a su alrededor.flex: 0 0 200px— fijo en200px: no crece ni se encoge, útil para una columna de ancho fijo.
Un error común: flex: 1 utiliza un flex-basis de 0, por lo que el ancho intrínseco del contenido se ignora y las columnas se vuelven verdaderamente iguales. Si en cambio deseas columnas dimensionadas por su contenido pero que aún puedan estirarse, usa flex: auto.
Valores
| Valor | Descripción |
|---|---|
| flex-grow | Especifica cuánto crecerá el elemento en relación con el resto de los elementos flexibles del mismo contenedor. |
| flex-shrink | Especifica cuánto se encogerá el elemento en relación con el resto de los elementos flexibles del mismo contenedor. |
| flex-basis | Especifica la longitud del elemento mediante "auto", "inherit" o un número seguido de "%", "px", "em", etc. |
| auto | Equivalente a 1 1 auto. |
| initial | Equivalente a 1 0 auto. |
| none | Equivalente a 0 0 auto. |
| inherit | Hereda esta propiedad de su elemento padre. |