Diferencia entre justificar contenido y alinearse

Al crear un sitio web, es necesario tener en cuenta el diseño del elemento. El "visualización flexible"La propiedad en CSS hace que el elemento sea flexible, y su contenido está justificado y alineado fácilmente si el contenido no usa todo el espacio disponible. El "Justify-Content"La propiedad especifica los elementos en el eje x, mientras que la"ítems alineados"La propiedad alinea los elementos con el eje Y.

Este manual demostrará la diferencia entre "Justify-Content" y "ítems alineados"Del contenedor flexible.

Diferencia entre "justificar contenido" y "alinearse" en CSS

El CSS "Justify-ContentLa propiedad especifica cómo el navegador asigna el espacio entre los elementos de contenido entre el eje principal de un contenedor flexible y el eje en línea de un contenedor de cuadrícula. Sin embargo, el "ítems alineados"La propiedad establece los elementos en el eje Y en el FlexBox. En el diseño de la cuadrícula, establece la alineación del contenido en el eje del bloque.

Valores para la propiedad "Justify-Content"

El "Justify-Content"La propiedad puede tener valores que se enumeran a continuación:

• centro
• espacio entre
• espacio-incluso
• espacial
• arranque flexible
• gama flexible
• inicial
• Heredar

Valores para la propiedad "Alinearse"

El "ítems alineados"La propiedad puede tener valores que se enumeran a continuación:

• centro
• estirar
• base
• arranque flexible
• gama flexible
• inicial
• Heredar

Cómo justificar el contenido con CSS?

Para justificar el contenido en HTML utilizando CSS, el "Justify-Content" y "ítems alineadosSe utilizan propiedades. Para la demostración, hemos proporcionado el ejemplo en el que el principal "div"Se aplica con la propiedad"mostrar"Valor como"doblar". Esta propiedad hará el "div"Flexible a sus artículos. La otra caja dentro de la principal "div"La caja estará justificada y alineada de acuerdo con los valores.

Seguimiento de los pasos establecidos para una mejor comprensión.

Paso 1: Crear página HTML

Primero, cree una página HTML y agregue los siguientes elementos:

• Agrega un ""Elemento con el nombre de la clase"caja".
• Dentro de esto ""Container, agregue otro" "y asigna una clase"caja-1":

Paso 2: Estilo primero el elemento "div"

Para el estilo del primero "div"Elemento, acceda a él en CSS con la ayuda de la clase asignada".caja". Luego, aplique las propiedades codificadas a continuación:

.caja
Border: 2px sólido Blueviolet;
Ancho: 500px;
Altura: 250px;
Margen: 40px Auto;
Pantalla: Flex;

Aquí está la elaboración del fragmento de código anterior:

• "bordeLa propiedad se utiliza para ajustar el borde alrededor de Div.
• "ancho"Propiedad con un valor de"500px"Establece el ancho de la caja Div.
• "altura"La propiedad establece la altura del" Div "a"250px".
• "margen"Especifica un espacio de"40px"En la parte superior e inferior.
• "mostrar"La propiedad establece el comportamiento de la pantalla. El valor "doblar"Hace que este div sea flexible para sus artículos.

Paso 3: Segundo elemento de estilo "div"

Acceder a un segundo "div"A través de la clase asignada".caja-1"Y aplique el siguiente CSS:

.Box-1
Ancho: 100px;
Altura: 100px;
Color de fondo: chocolate;

El "ancho" y "alturaSe aplican las propiedades. Entonces el "color de fondo"La propiedad se aplica para establecer el color en el fondo del elemento:

Paso 4: Aplicar la propiedad "Justify-Content"

Para justificar el contenido, hemos aplicado el "Justify-Content"Propiedad como"centro" en lo principal "div". Esta propiedad alinea su contenido de acuerdo con el valor dado:

.caja
Border: 2px sólido Blueviolet;
Ancho: 500px;
Altura: 250px;
Margen: 40px Auto;
Pantalla: Flex;
Justify-Content: Center;

De la imagen a continuación, puede observar que el principal "div"Alinea su contenido"caja-1Div en el centro en el eje X:

Paso 5: Aplicar la propiedad "Alinear"

El "ítems alineados"La propiedad establece los elementos en el eje Y en el FlexBox. En el CSS, hemos agregado la propiedad "Alineación de Items" como "centro"Para alinear el contenido en el centro a lo largo del eje Y:

.caja
Border: 2px sólido Blueviolet;
Ancho: 500px;
Altura: 250px;
Margen: 40px Auto;
Pantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;

Puede ver eso, hemos justificado con éxito el contenido con CSS:

Hemos demostrado la diferencia entre Justify-Content y Align-Item y cómo usarlos para justificar el contenido.

Conclusión

Las propiedades "Justify-Content" y "ítems alineados"Se utilizan para especificar cómo muestra el navegador el contenido. La propiedad Justify-Content agrega los márgenes alrededor y entre los elementos a lo largo del eje X del contenedor flexible y el eje en línea del contenedor de cuadrícula. Sin embargo, el "ítems alineados"La propiedad establece los elementos en el eje Y en el FlexBox. Esta publicación ha elaborado la diferencia entre Justify-Content y Align-Item y cómo usarlos para justificar el contenido.