Display = flex

La propiedad display viene de CSS 2.1 y es una de las más usadas en CSS su función es determinar el tamaño y la posición de la caja.

Los valores de display pueden ser:

display: inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit, flex;

¿Qué es flex?

Fickr

El flexbox layout es un modelo flexible de caja para layouts mucho más ambiciosos que permite colocar los elementos de una página para que se adapte correctamente a los diferentes comportamientos de diferentes dispositivos.

Los hijos de un padre flex, definido por display: flex o `inline-flex, serán flexibles pudiendo tener dimensiones flexibles y colocarse en cualquier dirección.

[ ver pen ]

Algunas propiedades

flex-direction determina la dirección de los hijos pudiendo ser de tipo row (fila) o column (columna).

|____ `row` o `row-reverse` [ ver pen ]
.container{
  display: flex;
  // La dirección del padre influye a los hijos
  flex-direction: row; //ó row-reverse [D|C|B|A]
}
|____ `column` o `column-reverse` [ ver pen ]
.container{
  display: flex;
  // La dirección del padre influye a los hijos
  flex-direction: column; // ó column-reverse D, C, B, A
}

justify-content define como el navegador establece el espacio alrededor de los elementos flexibles. Sus valores pueden ser

|____ `flex-start`: (valor por defecto) los ítems flexibles son envueltos desde el elemento de inicio quedando por tanto alineados a la izquierda. [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
|____ `flex-end`: los ítems flexibles son envueltos desde el extremo del último elemento quedando por tanto alineados a la derecha. [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
|____ `center` : los ítems flexibles son envueltos desde el centro del ancho del contenedor quedando pues alineados en el centro [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
|____ `space-between`: los ítems flexibles se extienden a lo largo del ancho del contenedor y la separación entre ítems vendrá definida por el numero de ítems en relación al ancho del contenedor. [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
|____ `space-around`: en este caso los ítems son distribuidos a lo largo del ancho del contenedor pero los ítems adyacentes (el primero y el último) tendrán el mismo espacio que el resto de ítems en lugar de tener el espacio definido en el contenedor como pasa con el valor `space-between. [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

align-items define cómo los elementos flexibles se disponen a lo largo del eje del eje de las Ys

|____ `stretch` [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}
|____ `flex-end` [ ver pen]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}
|____ `flex-start` [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
|____ `center` [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
|____ `baseline` [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

flex-wrap se aplica al contenedor y define si cada ítem irá en una sola línea o puede ir en múltiple líneas para ajustarlo y reposicionarlo en función

|____ `no-wrap` valor por defecto, los ítems son tratados de forma multilinea y se ajustan en función. [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: center ;
}
|____ `wrap` los ítems son ajustados a una sola línea y se reposicionan en función [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center ;
}
|____ `wrap-reverse` los ítems quedan en una sola línea pero reposicionan partiendo del último elemento [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  align-items: center ;
}

flex se aplica en los hijos flexibles

|____ `auto` hace que cada ítem fluya y se ajuste de forma más elegante y ocupando espacios debidamente [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse ;
  align-items: center ;
}
.item {
  flex: auto;
}
|____ `1, 2, 3` suponiendo que cada ítem tiene asignado un flex de 1 significa que todos tendrán el mismo ancho pero si definimos alguno a 2 ese elemento tendrá el doble de distancia [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse ;
  align-items: center ;
}
.item {
  flex: 1;
  &:nth-child(1){
    //Le damos el doble de ancho al elemento que ocupa la primera posición
    flex: 2;
  }
}

order cambia el orden de los ítems.

|____ `1, 2, 3` orden númerico [ ver pen ]
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse ;
  align-items: center ;
}
.item {
  flex: 1;
  //Cambiamos el orden natural de los elementos
  &:nth-child(1){
    order: 2
  }
  &:nth-child(2){
    order: 1
  }
}

RWD

A nivel de diseño responsable o adaptable se pueden conseguir grandes cosas combinando flex-box con medias queries, el control sobre los elementos es mucho mayor y la fluidez con la que se posicionan los elementos y ajustan al layout es deliciosa.

Soporte

Es posible encontrar varios polyfill a nivel de Javascript, también se puede usar Modernizr para detectar si este modulo es soportado o no y mostrar otra propiedad CSS en caso de que no sea soportado, o simplemente dejar que no se interprete flexbox y que el navegador muestre el contenido como sabe, también es una opción ya que se verá el contenido uno debajo del otro.

Si quieres más información sobre flex box model visita la web de css tricks donde encontrarás un extenso artículo.

¿Qué puedes hacer con flex?

He hecho un menú horizontal y vertical :)

See the Pen Horizontal and Vertical Menu with Flex Module by Davilious (@davilious) on CodePen.

¡Feliz código!