Los elementos se muestran en una sola fila en el orden en el que vienen por el flujo del documento HTML
Los elementos se muestran en una sola fila en el orden inverso al que vienen por el flujo del documento HTML
Los elementos se apilan en una columna en el orden en el que vienen por el flujo del documento HTML
Los elementos se apilan en una columna en el orden inverso al que vienen por el flujo del documento HTML
*** IMPORTANTE: Al girar 90º el eje principal esto va a afectar a las propiedades de alineación y justificación. ***
No-wrap es el valor inicial por defecto y lo que hace es que cuando los elementos no caben, no se ajuste a la caja padre, provocando desbordamiento
Con el valor wrap, cuando los elementos colapsan y no caben en su caja padre, saltan de línea. El orden de las líneas es el que viene en el documento.
Con el valor wrap, cuando los elementos colapsan y no caben en su caja padre, saltan de línea, pero el orden de las líneas se invierte, respetando en la fila el orden de lectura.
Con la propiedad order aplicada a un elemento hijo alteramos el flujo del HTML. A la propiedad order se le da un valor numérico, el cual por defecto es 0. Los elementos se colocan de menor a mayor valor en su order. Si dos elementos tienen el mismo order, se colocaran siguiendo el flujo del HTML.
Las cajicas 2 y 6 se muestran las últimas porque llevan el 'order:4' mientras que las otras llevan el order con el valor por defecto: 0.
Con esas propiedades aplicadas a los elementos hijos podemos controlar cuales van a crecer o encoger en función de las variaciones de tamaño de su padre.
Con el short-hand 'flex' aplicamos las 3 propiedades en el siguiente orden:
"flex: flex-grow(nº) , flex-shrink(nº), flex-basis(tamaño inicial);"
En este ejemplo las cajas 2, 3, 7, y 8 llevan propiedades flex de Expansión y compresión:
La propiedad justify-content establece la forma en que se reparte el espacio libre disponible en la dirección principal.
Los elementos se sitúan al principio de la dirección principal, es decir, el espacio disponible se sitúa al final.
Los elementos se sitúan al final de la dirección principal, es decir, el espacio disponible se sitúa al principio.
Los elementos se sitúan justificados al centro, agrupados y sobrando espacio por los laterales.
Los elementos se distribuyen de manera equitativa, dejando el mismo espacio entre ellos pero no por los laterales.
Los elementos se distribuyen de manera equitativa entre ellos, reservando también espacio por los laterales.
Los elementos se distribuyen de manera equitativa entre ellos, reservando también espacio por los laterales y este espacio es el mismo que entre ellos.
La propiedad align-items establece la forma en que se alinean los elementos en la dirección secundaria.
Los elementos se sitúan al principio de la dirección secundaria (es decir, arriba si la dirección secundaria es el eje vertical)
Los elementos se sitúan al final de la dirección secundaria (es decir, abajo si la dirección secundaria es el eje vertical)
Los elementos se sitúan en el centro de la dirección secundaria (es decir, en medio si la dirección secundaria es vertical).
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
La propiedad align-self permite que un elemento tenga una alineación en la dirección secundaria distinta de la establecida con align-items.
Los elementos se sitúan al principio de la dirección secundaria (es decir, arriba si la dirección secundaria es el eje vertical)
Los elementos se sitúan al final de la dirección secundaria (es decir, abajo si la dirección secundaria es el eje vertical)
Los elementos se sitúan en el centro de la dirección secundaria (es decir, en medio si la dirección secundaria es vertical).
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
La propiedad align-content establece la manera en que se reparte el espacio sobrante en la dirección secundaria.
Normalmente, el espacio ocupado en la dirección secundaria por un elemento flexible depende de su contenido, por lo que no suele haber espacio sobrante.
Por ello, en los ejemplos siguientes el espacio disponible en la dirección secundaria se ha establecido con la propiedad height, de manera que haya espacio sobrante.
Los elementos se sitúan al principio de la dirección secundaria (es decir, arriba si la dirección secundaria es el eje vertical)
Los elementos se sitúan al final de la dirección secundaria (es decir, abajo si la dirección secundaria es el eje vertical)
Los elementos se sitúan en el centro de la dirección secundaria (es decir, en medio si la dirección secundaria es vertical).
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
Todos los elementos crecen y toman el mismo tamaño en la dirección secundaria.
La propiedad align-content establece la manera en que se reparte el espacio sobrante en la dirección secundaria.
Normalmente, el espacio ocupado en la dirección secundaria por un elemento flexible depende de su contenido, por lo que no suele haber espacio sobrante.
Por ello, en los ejemplos siguientes el espacio disponible en la dirección secundaria se ha establecido con la propiedad height, de manera que haya espacio sobrante.
El contenedor se comporta como un bloque, es decir, ocupa todo el espacio horizontal disponible dentro de su elemento padre. Si no cabieran se irán añadiendo en las siguientes filas.
El contenedor se comporta como un elemento en-línea (ocupa sólo el espacio horizontal necesario y pueden colocarse unos detrás de otros en la misma línea)