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