Características flex en CSS

por
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 inicialPara cada valor corto:
flex-grow: 0.
flex-shrink: 1.
flex-basis: auto.
Aplicado aElementos flexibles.
HeredableNo
MóvilSí
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, 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.

  
  
  
  
CSS flex Property  
  
  
  
  
  
  

 CSS flex Property 
  

 flex: auto; 
  

  

  

  

  

  

  

  

  

 flex: 0 1 30px; 
  

  

  

  

  

  

  

  

  
  
 

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-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 y se interpretará como un valor .
  • Un valor válido para ser utilizado con la propiedad width, se interpretará como .
  • Una de las palabras reservadas noneo auto o initial.

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

  • Un número sin uno de los tipos  y se interpretará como .
  • Un valor válido para ser utilizado con la propiedad width, se interpretará como .

Si especificamos tres valores:

  • El primer valor debe ser un número sin uno del tipo  y se interpretará como .
  • El segundo valor debe ser un número sin uno de tipo  y se interpretará como .
  • El tercer valor debe ser válido para ser utilizado con la propiedad width y se interpretará como .

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

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

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.