Entendiendo el Contenedor Flex
Cuando estableces display: flex en un elemento, se convierte en un contenedor flex y sus hijos directos se convierten en items flex. El contenedor controla el eje principal (determinado por flex-direction) y el eje transversal (perpendicular al eje principal). Todas las propiedades de espaciado y alineacion operan a lo largo de estos dos ejes.
Alineacion del Eje Principal con justify-content
justify-content distribuye items a lo largo del eje principal. flex-start empaqueta items al inicio; flex-end al final; center los agrupa en el medio. space-between pone espacio igual entre items; space-around agrega espacio igual alrededor de cada item; space-evenly distribuye espacios identicos entre y alrededor de items.
Alineacion del Eje Transversal con align-items
align-items posiciona items a lo largo del eje transversal. stretch llena la dimension transversal completa; flex-start alinea al borde de inicio; flex-end al borde final; center coloca items en el medio; baseline alinea items por sus lineas base de texto, lo cual es util cuando los items tienen diferentes tamanos de fuente.
Dimensionamiento de Items Flex: grow, shrink, basis
flex-grow controla como los items se expanden para llenar espacio extra. flex-shrink controla como los items se contraen cuando el espacio es escaso. flex-basis establece el tamano inicial antes de crecer o contraerse. La abreviatura flex: 1 1 0 significa crecer igualmente, contraerse igualmente, comenzando desde ancho cero.
