⇪

Flexbox - una introducción

facebook-svg gplus-svg twitter-svg

¿Qué es flexbox?

Flexbox ( o el módulo de cajas flexibles ) es probablemente uno de los más completos y eficaces módulos de maquetación. Todo lo que era complicado en versiones anteriores de CSS ( como centrar verticalmente o diseñar estructuras que se redimensionen con elegancia ) con flexbox ( CSS3 ) es ya una tarea muy fácil.

¿Cómo crear una caja flex?

Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexible o caja flex. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementos o ítems flex.

Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.

La propiedad display esta por ahí desde CSS1, pero es en el CSS3 cuando adquiere la capacidad de transformar una caja cualquiera en un contenedor flex. Para esto tiene que tomar una de estas valores: flex o flex-inline.

.flex-container{display:flex;}
  o
.flex-container{display:flex-inline;}

.flex-container{
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}			 
.flex-container-inline{
	display:-webkit-inline-flex; 
	display: -ms-inline-flexbox; 
	display: inline-flex;
}

Propiedades del contenedor flex

Propiedad Sintaxis Descripción
display display: flex |  inline-flex ;
display: -ms-flexbox | -ms-inline-flexbox; 
.flex-container{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
 Si su valor es flex o inline-flex, la propiedad display define un contenedor flex ( flexbox ).
flex-direction flex-direction: row | row-reverse | column | column-reverse; 
.flex-container{ 
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; 
}

Establece la dirección del eje principal y por tanto la dirección de los elementos flex.
El valor por defecto es row ( fila ).
flex-wrap flex-wrap: nowrap | wrap | wrap-reverse; 
.flex-container{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
 Especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ).
El valor por defecto es nowrap.
flex-flow flex-flow: flex-direction [flex-wrap] 
.flex-container{ 
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; 
}
 Es la forma abreviada para las propiedades flex-direction y flex-wrap.
El valor por defecto es row nowrap
align-items align-items: flex-start | flex-end | center | baseline | stretch;
-ms-flex-align:start | end | center | baseline | stretch; 
.flex-container{
    -webkit-align-items: flex-start;
    -ms-flex-align:start;
    align-items: flex-start;
}
 Define como se colocan los elementos dentro de una caja flexible flexbox relativamente al eje transversal.
El valor por defecto es stretch.
justify-content justify-content: flex-start | flex-end | center | space-between | space-around;
-ms-flex-pack: start | end | center | justify | justify; 
.flex-container{
   -webkit-justify-content:flex-start;
   -ms-flex-pack:start;
   justify-content:flex-start; 
}
 Define como se colocan los elementos dentro de una caja flexible ( flexbox ) relativamente al eje principal, cuando los elementos no ocupan toda la caja.
El valor por defecto es flex-start.
align-content align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-ms-flex-line-pack: start | end | center | justify | stretch; 
.flex-container{
    -webkit-align-content: flex-start;
    -ms-flex-line-pack:start;
    align-content: flex-start;
}
 Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje transversal.
El valor por defecto es stretch.

 

Propiedades de los elementos ( ítems ) flex

Propiedad Sintaxis Descripción
align-self align-self: auto | flex-start | flex-end | center | baseline | stretch;
-ms-flex-item-align:auto | start | end | center | baseline | stretch;
.item {
   -webkit-align-self: flex-start;
   -ms-flex-item-align:start;
   align-self: flex-start;
}
 Reposiciona elementos individuales relativamente al eje transversal. Generalmente se trata de elementos posicionados con align-items.
flex-grow flex-grow: número | initial | inherit; 
.item{
    -webkit-flex-grow: 2;
    -ms-flex-grow:2;
    flex-grow: 2;
}
 Define cuánto puede crecer un elemento flex, si fuera necesario.
El valor por defecto es 0.
flex-shrink flex-shrink: número | initial | inherit; 
.item{
    -webkit-flex-shrink: 2;
    -ms-flex-shrink:2;
    flex-shrink: 2;
}
 Define cuánto puede disminuir ( contraerse ) un elemento flex, si fuera necesario.
El valor por defecto es 1.
flex-basis flex-basis: número | auto | initial | inherit; 
.item {
   -webkit-flex-basis: auto;    
   -ms-flex-basis: auto;
   flex-basis: auto;
}
 Especifica el valor inicial del tamaño principal de un elemento flex.
El valor por defecto es auto.
flex flex: none | flex-grow [flex-shrink] [flex-basis]; 
.item {
   -webkit-flex: 1;    
   -ms-flex: 1;
   flex: 1;
}
 La forma abreviada para flex-grow, flex-shrink y flex-basis juntos.
El valor por defecto es 0 1 auto.
order order: número | initial | inherit; 
.item{
   -webkit-order: 2;
   -ms-order:2;
   order: 2;
}

Se utiliza para cambiar el orden en el que aparecen los elementos individuales.

Entender flexbox de manera interactiva.