CSS Flexible Box Layout

Conceptos básicos

Con flexbox puedes hacer que los elementos dentro de cualquier <div> fluyan estableciendo la propiedad display como flex y luego dando a la propiedad flex-flow el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.
Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad flex. Generalmente querrás utilizar uno de los tres siguientes valores:

1. Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza flex: none que se expande a 0 0 auto.
2. Si deseas explícitamente dimensionar un elemento, usa flex: 0 0 tamaño. Por ejemplo: flex 0 0 60px.
3. Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza flex: auto. Se expande a 1 1 auto.

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos.

Video explicativo, profundo y claro, sobre flex.

Video resumen de video2brain sobre Flex Grid Layout.

Imágenes svg de propiedades flex.

Contenedor padre

Elementos hijos del contenedor

Propiedades de justify-content