Visualiza el contenedor flex y los elementos para ver claramente cómo se posicionan los elementos hijos dentro del contenedor flex
Ajusta las propiedades de flexbox para observar diferentes efectos de alineación y distribución
Dirección de los elementos flex
Alineación de elementos a lo largo del eje transversal
Alineación y distribución a lo largo del eje principal
Si los elementos se envuelven a nuevas líneas
Alineación de líneas envueltas a lo largo del eje transversal
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchContenedor flex con elementos de diferentes tamaños para demostrar efectos de alineación de flexbox
row - Los elementos fluyen horizontalmente (izquierda a derecha)row-reverse - Los elementos fluyen horizontalmente (derecha a izquierda)column - Los elementos fluyen verticalmente (arriba a abajo)column-reverse - Los elementos fluyen verticalmente (abajo a arriba)nowrap - Los elementos permanecen en una sola líneawrap - Los elementos se envuelven en nuevas líneas según sea necesariowrap-reverse - Los elementos se envuelven en nuevas líneas en orden inversoflex-start - Alinear elementos al inicio del eje transversalcenter - Centrar elementos en el eje transversalflex-end - Alinear elementos al final del eje transversalstretch - Estirar elementos para llenar el eje transversalbaseline - Alinear elementos a lo largo de su línea baseflex-start - Empaquetar elementos al inicio del eje principalcenter - Centrar elementos en el eje principalflex-end - Empaquetar elementos al final del eje principalspace-* - Distribuir espacio entre elementos