- Teoría
- Teoría
justify-content: distribución en el eje principal
Ya definimos el ancho y el relleno de las columnas. Su ancho total es menor que el del contenedor padre, así que queda espacio libre a la derecha.
En el diseño, las columnas están pegadas a los extremos opuestos y el espacio libre queda entre ellas:
Usaremos justify-content para llevar las columnas a los extremos del contenedor. Esta propiedad se aplica al contenedor flex y determina cómo se distribuyen sus elementos a lo largo del eje principal.
Estos son algunos de sus valores:
flex-start: los elementos se colocan al inicio del eje principal, que de forma predeterminada está a la izquierda;flex-end: se colocan al final del eje principal, que de forma predeterminada está a la derecha;center: se colocan en el centro del eje principal;space-around: el espacio libre se distribuye alrededor de los elementos;space-between: el espacio libre se distribuye entre los elementos; el primero y el último quedan en los extremos del contenedor flex.
Agregaremos justify-content a <main> y probaremos distintos valores.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Amplía la vista previa para apreciar mejor la diferencia entre los valores. Arrastra hacia la izquierda la flecha situada arriba, entre el editor y la vista previa.
- Agrega a la regla de
page-mainla propiedadjustify-contentcon el valorcenter. Las dos columnas se moverán al centro. - Cambia el valor de
justify-contentaspace-around. El espacio libre se repartirá alrededor de las columnas. - Cambia el valor de
justify-contentaspace-between. El espacio libre se repartirá entre las columnas.