El modelo de cajas flexibles FLEXBOX.

En los siguientes enlaces se pueden ver vídeos de Youtube que explican bastante bien las
distintas propiedades de este modelo:

https://www.youtube.com/watch?v=yJ2EmWxEJUk

https://www.youtube.com/watch?v=F-KCncXMPk0

Flexbox viene a solucionar uno de los mayores quebraderos de los diseñadores de páginas
web: cómo crear páginas flexibles, fluidas y dinámicas que funcionen en la amplia variedad de
dispositivos existentes utilizando CSS.

Funciona ajustando los tamaños y la disposición de los elementos que se encuentran dentro
de un contenedor o caja, de tal manera que se adapten siempre al espacio disponible.

La declaración display: flex; o display: inline-flex; define un “contenedor

flexible” y convierte de forma automática a sus “hijos” directos en “elementos flexibles”. Un
contenedor flexible tiene un Eje principal (main axis), que es la dirección en la cual se
posicionan los elementos flexibles. Y tiene un Eje transversal, perpendicular al Eje principal.
Ambos ejes tienen una serie de propiedades que controlan cómo se posiciona cada elemento
flexible en relación a los demás.

Vamos a ver un gráfico que nos lo muestra mejor:

Para hacer que un contenedor sea flexible se le tiene que dar el valor flex o inline-flex a la
propiedad display. En el modelo de caja flexible existen una serie de propiedades que pueden
aplicarse al contenedor principal o a los distintos flex-items que incluye.

Propiedades aplicables al contenedor flex:

 Flex-direction. Establece la dirección del eje principal (row horizontal, column vertical,
row-reverse, column.reverse)
 Flex-wrap. Esta propiedad especifica si los elementos que no quepan en el eje
principal, pasan a un nuevo eje paralelo. Posibles valores:wrap, nowrap, wrap-reverse.
Si se le pone nowrap (valor por defecto), el sistema cambiará la anchura del elemento,
aunque se le especifique un valor.
 Flex-flow. Es una propiedad resumen que engloba flex-direction y flex-wrap.
  Justify-content . Permite alinear los flex-items a lo largo del eje principal. Posibles
valores flex-start, flex-end, center, space-between (con espacio entre los elementos),
space-around (con espacio antes, después y entre los elementos)
 Align-Items. Permite alinear los ítems a lo largo del eje perpendicular al principal.
Posibles valores: flex-start, flex-end, center (son posicionados al centro del
contenedor), stretch (la altura del elemento se ajustará a la del contenedor)
 Align-content. Modifica el comportamiento de la propiedad flex-wrap. Es similar a
align-items, pero en lugar de alinear flex-items, alinea flex-lines.

Propiedades específicas para los flex-items:

 Order. Valor numérico que permite definir el orden en que se muestran los ítems,
independientemente del orden definido en el documento HTML.
 Flex-grow. Valor numérico que especifica cuánto va a crecer ese elemento
relativamente respecto al crecimiento del resto de los elementos
 Flex-shrink. Lo mismo que la anterior pero especificado a la hora de su reducción de
tamaño.
 Align-self. Permite alinear por separado cada flex-item. Sobreescribe el valor de align-
items del contenedor.
 Flex. Es una propiedad resumen que engloba flex-grow, flex-shrink y flex-basis.