Características flex en CSS

Una propiedad flex en CSS esta especifica cómo se expandirá o contraerá un elemento flexible para llenar el espacio disponible en el contenedor flexible. Este acceso directo de propiedad establece los atributos flex-grow, flex-shrink y flex-basis.

Funciones flex css

Valor inicial	Para cada valor corto: `flex-grow`: `0`. `flex-shrink`: `1`. `flex-basis`: `auto`.
Aplicado a	Elementos flexibles.
Heredable	No
Móvil	Sí
Valor calculado	Para cada valor corto: `flex-grow`: Como se especificó. `flex-shrink`: Como se especificó. `flex-basis`: Como se especifica, pero con longitudes relativas convertidas a absolutas.

/* valores clave */ 
flex: auto;
flex: initial;
flex: none;
flex: 2;
/* Un valor, número sin unidades: flex-grow */ 
flex :  2;
/* Un valor, width/height: flex-basis */ 
flex :  10em; 
flex :  30px;
/* 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;

Los desarrolladores ajustan el valor de la propiedad flex en la mayoría de las veces a uno de los valores, auto, initial, none o un número positivo. De forma predeterminada, los elementos flexibles no se reducen a menos de las dimensiones de contenido en las que se encuentran, y esto se puede cambiar estableciendo la propiedad min-width o min-height.

Ejemplos y aplicaciones en código

En este ejemplo, hay dos contenedores, cada uno con tres elementos flexibles. El ancho y alto de los contenedores son 200px y 100px. Estamos aplicando flex: auto; a los elementos flexibles del primer contenedor, flex: 0 1 30px; a los elementos flexibles del segundo contenedor.

<!DOCTYPE html>  
<html>  
<head>  
<title>  
CSS flex Property  
</title>  
  
<style>  
.container {  
width: 200px;  
height: 100px;  
border: 1px solid black;  
display: flex;  
margin: 15px;  
background-color: blue;  
}  
  
.flex-item{  
flex: auto;  
}  
.flex-item1{  
flex: 0 1 30px;  
}  
  
.flex-item, .flex-item1{  
background-color: lightblue;  
margin: 4px;  
}  
</style>  
</head>  
  
<body>  
<h1> CSS flex Property </h1>  
<h3> flex: auto; </h3>  
<div class = "container">  
<div class = "flex-item">  
</div>  
<div class = "flex-item">  
</div>  
<div class = "flex-item">  
</div>  
</div>  
<h3> flex: 0 1 30px; </h3>  
<div class = "container">  
<div class = "flex-item1">  
</div>  
<div class = "flex-item1">  
</div>  
<div class = "flex-item1">  
</div>  
</div>  
  
</body>  
</html>

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	29,0	20,0	11	12,5	9.0

Las versiones anteriores de algunos navegadores (por ejemplo, Chrome, IE, Safari) admitían flexbox pero con el uso de una versión anterior ( -webkit-o -ms-).

Características generales

La propiedad acepta flex uno, dos o tres valores. Si especificamos un valor, es:

Un número sin uno del tipo <number>y se interpretará como un valor <flex-grow>.
Un valor válido para ser utilizado con la propiedad width, se interpretará como <flex-basis>.
Una de las palabras reservadas noneo auto o initial.

Si especificamos dos valores, el primer valor es un número sin uno del tipo <number>, y se interpretará como <flex-grow>, el segundo valor es:

Un número sin uno de los tipos <number> y se interpretará como <flex-shrink>.
Un valor válido para ser utilizado con la propiedad width, se interpretará como <flex-basis>.

Si especificamos tres valores:

El primer valor debe ser un número sin uno del tipo <number> y se interpretará como <flex-grow>.
El segundo valor debe ser un número sin uno de tipo <number> y se interpretará como <flex-shrink>.
El tercer valor debe ser válido para ser utilizado con la propiedad width y se interpretará como <flex-basis>.

<flex-grow>

Especifica la propiedad flex-grow. Es de tipo de datos <number>. No se pueden usar números negativos. Su valor predeterminado (si se omite) es 0.

<flex-shrink>

Especifica la propiedad flex-shrink. Es de tipo de datos <number>. No se pueden usar números negativos. Su valor predeterminado (si se omite) es 1.

<flex-basis>

Especifica la propiedad flex-basis, y podemos usar cualquier valor aceptado por la propiedad width o height, y si queremos establecerlo en 0 uno debemos especificar uno para evitar malinterpretar este valor. Su valor predeterminado (si se omite) es 0.

none

Serán las dimensiones del elemento según width y height filiales a él, y estos elementos son flexibles, ya que no se estiran ni encogen en su contenedor flexible, y este valor se interpretará como (0 0 auto).

auto

Serán las dimensiones del elemento según width y height subsidiarias a él, pero se puede estirar para llenar el espacio vacío en su contenedor flexible, y se puede reducir a las dimensiones mínimas del contenido existente en él, y este valor será interpretado como (1 1 auto).

initial

Serán las dimensiones del elemento según width y height subsidiarias a él, y se puede reducir a las dimensiones mínimas del contenido existente en él, pero no se estirará para llenar el espacio vacío, y este valor se interpretará como (0 1 auto).

Estructura flex css

flex:  none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

Consulte también

Propiedades de la página sub incautados por un flex propiedad: flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink y flex-wrap.
Página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.