Diferença entre Justify-Content e Align-Items

Ao criar um site, é necessário levar em consideração o layout do elemento. O "Exibir flex”A propriedade no CSS torna o elemento flexível e seu conteúdo é justificado e alinhado facilmente se o conteúdo não usar todo o espaço disponível. O "Justify-Content”Propriedade especifica os itens no eixo x, enquanto“alinhado-itens”Propriedade alinha itens ao eixo y.

Este manual demonstrará a diferença entre “Justify-Content" e "alinhado-itens”Do recipiente flexível.

Diferença entre "Justify-Content" e "Align-Item" no CSS

O CSS “Justify-Content”Propriedade especifica como o navegador aloca espaço entre e ao redor de elementos de conteúdo ao longo do eixo principal de um contêiner flexível e um eixo embutido de um contêiner de grade. No entanto, o "alinhado-itens”Propriedade define os itens no eixo y no Flexbox. No layout da grade, ele define o alinhamento de conteúdo no eixo do bloco.

Valores para a propriedade "Justify-Content"

O "Justify-Content”A propriedade pode ter valores listados abaixo:

• Centro
• espaço entre
• espaço-mesmo
• espaço-around
• FLEX-Start
• flex-end
• inicial
• Herdar

Valores para a propriedade "Align-itens"

O "alinhado-itens”A propriedade pode ter valores listados abaixo:

• Centro
• esticar
• linha de base
• FLEX-Start
• flex-end
• inicial
• Herdar

Como justificar o conteúdo com CSS?

Para justificar o conteúdo em HTML utilizando CSS, o “Justify-Content" e "alinhado-itens”As propriedades são usadas. Para a demonstração, fornecemos o exemplo em que o principal “div"É aplicado com a propriedade"mostrar”Valor como“flex”. Esta propriedade fará o “div”Flexível para seus itens. A outra caixa dentro do principal “div”A caixa será justificada e alinhada de acordo com os valores.

Acompanhe as etapas declaradas para uma melhor compreensão.

Etapa 1: Crie a página HTML

Primeiro, crie uma página HTML e adicione os seguintes elementos:

• Adicione um “”Elemento com o nome da classe“caixa”.
• Dentro deste “"Contêiner, adicione outro" "e atribua uma classe"Box-1”:

Etapa 2: estilo primeiro elemento “div”

Para o estilo do primeiro “div”Elemento, acesse -o no CSS com a ajuda da classe atribuída“.caixa”. Em seguida, aplique as propriedades abaixo codificadas:

.caixa
borda: 2px Blueviolet sólido;
Largura: 500px;
Altura: 250px;
margem: 40px automático;
exibição: flex;

Aqui está a elaboração do trecho acima do código:

• ““fronteira”A propriedade é utilizada para ajustar a borda ao redor da div.
• ““largura”Propriedade com um valor de“500px”Define a largura da caixa div.
• ““altura”Propriedade define a altura do“ div ”para“250px”.
• ““margem"Especifica um espaço de"40px”Na parte superior e inferior.
• ““mostrar”Propriedade define o comportamento da tela. O valor que "flex”Torna essa divisão flexível aos seus itens.

Etapa 3: estilo segundo elemento “div”

Acesse um segundo “div"Através da classe atribuída".Box-1”E aplique o seguinte CSS nele:

.Box-1
Largura: 100px;
Altura: 100px;
Background-Color: Chocolate;

O "largura" e "altura”As propriedades são aplicadas. Então o "cor de fundo”A propriedade se aplica para definir a cor no fundo do elemento:

Etapa 4: Aplique a propriedade "Justify-Content"

Para justificar o conteúdo, aplicamos o “Justify-Content"Propriedade como"Centro”No principal“div”. Esta propriedade alinha seu conteúdo de acordo com o valor dado a ela:

.caixa
borda: 2px Blueviolet sólido;
Largura: 500px;
Altura: 250px;
margem: 40px automático;
exibição: flex;
Justify-Content: Center;

Da imagem abaixo, pode observar que o principal “div"Alinhe seu conteúdo"Box-1”Div no centro no eixo x:

Etapa 5: aplique a propriedade “Align-itens”

O "alinhado-itens”Propriedade define os itens no eixo y no Flexbox. No CSS, adicionamos a propriedade "Align-Items" como "Centro”Para alinhar o conteúdo no centro ao longo do eixo y:

.caixa
borda: 2px Blueviolet sólido;
Largura: 500px;
Altura: 250px;
margem: 40px automático;
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;

Você pode ver que justificamos o conteúdo com sucesso com o CSS:

Demonstramos a diferença entre o conteúdo justificado e o alinhamento e como usá-los para justificar o conteúdo.

Conclusão

As propriedades “Justify-Content" e "alinhado-itens”São usados ​​para especificar como o navegador exibe o conteúdo. A propriedade Justify-Content adiciona as margens e entre os itens ao longo do eixo x do contêiner flexível e o eixo embutido do contêiner de grade. No entanto, o "alinhado-itens”Propriedade define os itens no eixo y no Flexbox. Este post elaborou a diferença entre o conteúdo justificado e o alinhamento e como usá-los para justificar o conteúdo.