
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
none
oauto
oinitial
.
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
yflex-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.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS