La propiedad flex

facebook-svg gplus-svg twitter-svg

La propiedad flex es una propiedad de los ítems del contenedor flex.

Para que podamos escribir menos código, el CSS nos permite abreviar las tres propiedades: flex-grow, flex-shrink ( opcional ) y flex-basis ( opcional ) en una sola: flex. El valor por defecto es flex: 0 1 auto.

.item { flex: flex-grow [flex-shrink] [flex-basis]; }

.item {
    -webkit-flex: 0 1 auto;    
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

Veamos las tres propiedades:

La propiedad flex-grow

La propiedad flex-grow es una propiedad de los ítems del contenedor flex.

La propiedad flex-grow establece cuanto puede crecer un elemento flex en relación al resto de elementos de la misma caja flex. Su valor es un número.
El valor por defecto de flex-grow: 0, lo que quiere decir que el elemento no puede crecer. Si todos los ítems de una caja tienen el mismo valor de flex-grow, por ejemplo flex-grow:1; quiere decir que todos los ítems tienen que crecer  en igual proporción, hasta ocupar todo el espacio disponible.

.flex-item{
    -webkit-flex-grow: 0;
    -ms-flex-grow:0;
    flex-grow:0;
}

Veamos un ejemplo: los contenedores .flex-container tienen una anchura height: 250px. Anidados dentro de cada contenedor hay 4 ítems ( elementos flex ) cuya anchura declarada es de 10%. Esto genera un espacio restante de 60%.

Queremos que el segundo contenedor .flex-container quede completamente ocupado. Decidimos que el segundo ítem crecerá ocupando una parte del espacio restante ( flex-grow:1 ), y el cuarto elemento dos partes ( flex-grow:2 ). Los demás elementos siguen igual.


.flex-container{
	width: 250px;
	height: 70px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
[class^="flex-item"] p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center; 
	margin:0; }
.flex-item{
	display: inherit;
	width:10%;
	height:50px;
	background-color:#ccc;
	margin:5px;
} 

.flex-item.flex-grow1{
	-webkit-flex-grow: 1;
    -ms-flex-grow:1;
	flex-grow:1;
}
.flex-item.flex-grow2{
	-webkit-flex-grow: 2;
    -ms-flex-grow:2;
	flex-grow:2;
}

1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

4

La propiedad flex-shrink

La propiedad flex-shrink es una propiedad de los ítems del contenedor flex.

La propiedad flex-shrink establece cuanto puede disminuir un elemento flex en relación al resto de elementos de la misma caja flex. Su valor es un número.
El valor por defecto de flex-shrink: 1, lo que quiere decir que los elementos de una caja flex disminuirán en igual proporción, por tal de acomodarse dentro de la caja.

.flex-item{
    -webkit-flex-shrink: 1;
    -ms-flex-shrink:1;
    flex-shrink:1;
}

Veamos un ejemplo: los dos contenedores .flex-container tienen una anchura height: 250px. Anidados dentro de cada contenedor hay 4 ítems ( elementos flex ) cuya anchura declarada es de 40%, y no puede haber cambio de línea ( por defecto  flex-wrap: nowrap ). Esto genera un exceso de 60%. Si no hacemos nada  todos los ítems disminuirán por igual ( el primer contenedor ).

En el segundo contenedor .flex-container decidimos que el tercer ítem disminuirá dos veces más que los demás elementos ( flex-shrink: 2;)


.flex-container{
	width: 250px;
	height: 70px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
[class^="flex-item"] p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center; 
	margin:0; }
.flex-item1{
	display: inherit;
	width:40%;
	height:50px;
	background-color:#ccc;
	margin:5px;
}

.flex-item1.flex-shrink2{
	-webkit-flex-shrink: 2;
    -ms-flex-shrink:2;
	flex-shrink:2;
}

1

2

3

4

1

2

3

4


1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

4

La propiedad flex-basis

La propiedad flex-basis es una propiedad de los ítems del contenedor flex.

La propiedad flex-basis especifica el valor inicial del tamaño principal de un elemento flex, antes de que esté redimensionado con flex-grow o flex-shrink.

Recuerde que: el tamaño principal  de un elemento flex es la anchura en contenedores horizontales - donde  flex-direction: row; o la altura en contenedores verticales  - donde  flex-direction: column.

El valor por defecto de  es flex-basis: auto. En este caso la anchura base del ítem es igual a la anchura declarada ( width ) del elemento, o en su defecto, la anchura calculada por el navegador en base a su contenido.

.item {
   -webkit-flex-basis: auto;    
   -ms-flex-basis: auto;
   flex-basis: auto;
}

En el siguiente ejemplo los ítems flex ( .flex-item ) tienen una anchura width:10%. Para el cuarto elemento de la segunda caja ( .flex-basis50 ) establecemos flex-basis:50%. Observamos como flex-basis sobrescribe la anchura declarada del elemento.


.flex-container{
	width: 250px;
	height: 70px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
[class^="flex-item"] p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center; 
	margin:0; }
.flex-item{
	display: inherit;
	width:10%;
	height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-basis50 {
   -webkit-flex-basis: 50%;    
   -ms-flex-basis: 50%;
   flex-basis: 50%;
}

1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

4

Entender flexbox de manera interactiva.