Características flex en CSS

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-growflex-shrinkflex-basis.

Funciones flex css

Valor inicialPara cada valor corto:
flex-grow0.
flex-shrink1.
flex-basisauto.
Aplicado aElementos flexibles.
HeredableNo
Móvil
Valor calculadoPara 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, autoinitialnone 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-widthmin-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ísticaChromeFirefoxIEÓperaSafari
Soporte básico29,020,01112,59.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--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 noneautoinitial.

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 widthheight, 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 widthheight 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 widthheight 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 widthheight 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-basisflex-directionflex-flowflex-growflex-shrinkflex-wrap.
  • Página de cada una de las propiedades widthheight 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.