Propiedad flex de CSS
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 toma por defecto 1, flex-shrink toma por defecto 1 y flex-basis toma por defecto 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á establecida en auto, esto dimensionará el elemento flexible en función de su contenido.
La palabra clave initial es equivalente a 1 0 auto. Dimensiona el elemento en función de sus propiedades de ancho/alto (o de su contenido si no se establecen). Esto hace que el elemento flexible sea rígido cuando queda espacio libre, 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 flexibles a lo largo del eje principal.
La palabra clave none es equivalente a 0 0 auto. Dimensiona el elemento de acuerdo con las propiedades width y height. Es completamente rígido.
INFO
Nota: Los valores iniciales de flex-grow y flex-shrink difieren de sus valores predeterminados cuando no se incluyen en la declaración abreviada de flex, para que pueda adaptarse mejor a los casos comunes.
| Valor inicial | 0 1 auto |
|---|---|
| Se aplica a | Elementos flexibles, incluidos pseudo-elementos en flujo. |
| Heredado | No. |
| Animable | Sí. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.flex = "1"; |
Sintaxis
Sintaxis de la propiedad flex de CSS
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 de min-width o min-height para evitar que el elemento se reduzca por debajo de un tamaño especificado.
Ejemplo de la propiedad flex:
Ejemplo de la propiedad flex de CSS
<!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 flex de CSS 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 flex de CSS 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>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 reducirá el elemento en relación con el resto de los elementos flexibles del mismo contenedor. |
| flex-basis | Especifica la longitud del elemento como "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. |
Práctica
¿Cuáles son las propiedades del contenedor Flex de CSS?