Flexbox

display: flex;
El tamaño del contenedor se ajusta al tamaño de la pantalla (mejor opción responsive).
display: inline-flex
El tamaño del contenedor es siempre el mismo, independientemente del tamaño de la pantalla.
Propiedades flex container (padre):
- flex-direction
  Opciones:
  - row (por defecto)
  - row-reverse: se invierte el orden de los elementos.
  - column: los elementos se posicionan en columna, en vez de en fila.
  - column-reverse: posicionamiento en columna, pero cambiando el orden de los elementos (de abajo a arriba).
- flex-wrap
  Opciones
  - nowrap (por defecto)
  - wrap: al reducir el ancho del contenedor, los elementos van posicionandose uno debajo del otro, lo que provoca que el alto del contenedor sea cada vez mayor.
  - wrap-reverse: igual que wrap, pero el orden de los elementos al posicionarse sería el inverso.
- flex-flow: row wrap; (shorthand para poner las dos anteriores)
- justify-content: si es center, centra el conjunto de los elementos en el eje principal (si es flex-direction: row; el eje principal es horizontal y el transversal es vertical).
- align-items: si es center, centra los elementos en el eje transversal (si es flex-direction: row; el eje transversal es vertical y si el flex-direction: column es horizontal).
- Ejemplo de justify-content: center; y align-items: center; aquí
- align-content: establece dónde se quedaran ubicados los elementos tras minimizar el contenedor.
- z-index también afecta a flex items, además de a elementos cuya propiedad position es distinta de static

Propiedades flex items (hijos):
- order: 0 (default): Para cambiar el orden de un elemento dentro del contenedor.
  order: 1; pone el elemento al final (siempre que otro elemento no tenga por valor 2 o más) y
  order: -1; al principio (siempre que no haya valores inferiores)
- align-self Alinea un item concreto en el eje transversal
  Ej.: align-self: flex-start; alinearía el item arriba del todo si la flex direction fuera row, porque en ese caso, el eje transversal es vertical (de arriba a abajo).
- flex-grow: 0 (default): Si el valor es 1 o superior, ese elemento ocupará más espacio al ampliar el ancho de la página que el resto de elementos que tengan valores inferiores (o nada, que por defecto será 0).
- flex-shrink: 1 (default): Si el valor es superior a 1, ese elemento decrecerá más que el resto al minimizar el ancho de la página.
flex-basis: auto (default): Si el valor es por ej. 300px, sobrescribirá el valor del width del elemento (cuando la flex-direction sea row)
Si la flex-direction es column, el valor sustituirá al height del elemento.
Por tanto, siempre aplica al eje principal.
flex: 0 (grow) 1 (shrink) auto (basis): Shorthand