La propiedad flex
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.