Flexbox

Flexible Box Layout. Modelo de cajas flexibles de CSS3.

Sistema de organización unidimensional diseñado para construir interfaces de usuario donde los elementos pueden tener tamaños flexibles y organizarse de forma adaptable al espacio disponible.

• Soporte de Flexbox en navegadores

• display: flex;

Para controlar el flujo de los elementos del contenedor flex:

• flex-direction. Valores:
  • row
  • column
  • row-reverse
  • column-reverse
• flex-wrap. Valores:
  • wrap
  • nowrap (por defecto)
• flex-flow: atajo de flex-direction y flex-wrap. Por ejemplo: flex-flow: row wrap.
• order
• flex-basis
• flex-grow
• flex-shrink
• flex: atajo de flex-grow, flex-shrink y flex-basis. Por ejemplo: flex: 1 100px es lo mismo que:
  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 100px

Para el posicionamiento y distribución de los elementos usamos la propiedad justify-content.

Si queremos agrupar:

• flex-start
• flex-end
• center

Si queremos añadir espacio entre los elementos:

• space-between
• space-around
• space-evenly

Se comporta como justify-content, pero para el eje transversal en lugar del longitudinal.

Valores:

• stretch (por defecto)
• flex-start
• baseline
• center