CSS - melhor maneira de definir a distância entre os itens do Flexbox

Existem dois métodos mais usados ​​para definir a distância entre os itens do Flexbox, i i.e., O uso da propriedade CSS de conteúdo justificado com a propriedade espacial e com a propriedade entre o espaço. Quando o "Justify-Content”A propriedade CSS está definida como“espaço-around”, Ele adiciona espaço em torno de cada item Flexbox do elemento HTML. No entanto, quando seu valor é definido como “espaço entre”, Ele adiciona espaço entre os itens do elemento HTML.

Este artigo demonstrará o uso dos valores "espaço-volume" e "intermediário" para o "conteúdo justificado" com o objetivo de adicionar espaços entre os itens do Flexbox.

Como definir a distância entre os itens do Flexbox?

A sintaxe para definir o “Justify-Content”Para definir o espaço e entre os itens do Flexbox é o seguinte:

Justify-Content: Space-Around; Justify-Content: Space Between;

Pré -requisito: Criando itens do Flexbox

Para definir a distância entre os itens do Flexbox, é necessário primeiro criar uma caixa flexível com os itens do Flexbox e depois aplicar as propriedades CSS nele.

Exemplo

Vamos adicionar um elemento de contêiner de div para criar a div e, em seguida, alguns elementos da div

A
B
C
D

No trecho de código adicionado acima:

• A "div”O elemento de contêiner foi adicionado à classe declarada como“flex”.
• Dentro disso, mais quatro elementos de contêineres div são adicionados, cada um com o nome da classe declarado como “item”.
• Os elementos div têm o texto “A","B","C" e "D”Escrito neles.

O elemento estilo CSS conterá algumas propriedades para exibir melhor os itens do Flexbox:

.flex

exibição: flex;
Altura: 50VH;
alinhado-itens: centro;

.item

Largura: 40px;
Altura: 40px;
cor de fundo: póblue;
Alinhamento de texto: centro;
preenchimento: 25px;

No trecho de código acima, as seguintes propriedades CSS foram adicionadas:

• O "mostrar”A propriedade foi definida como“flex”Para alinhar adequadamente o texto dentro do contêiner Div.
• O "altura”A propriedade foi definida como“50VH”Para definir o comprimento vertical do elemento de contêiner Div.
• O "alinhado-itens”A propriedade é definida como centrada para alinhar o elemento div ao centro.
• Depois de ".flex”Seletor de classe, o“.item”O seletor de classe é adicionado que possui as propriedades CSS para os itens dentro do contêiner Div principal.
• O "largura”A propriedade é definida como“40px”Para definir o comprimento horizontal de cada um dos itens do Flexbox.
• O "altura"Dos itens do Flexbox está definido como"40px”.
• O "cor de fundo"Dos itens do Flexbox é definido como"Pó azul”.
• O "alinhamento de texto”Center foi definido como“Centro”Para alinhar os alfabetos escritos dentro dos itens do Flexbox ao centro.
• O "preenchimento”A propriedade foi definida como“25px”Para definir a distância entre o conteúdo e a fronteira.

O trecho de código acima gerará a seguinte saída:

Agora, é necessário definir a distância entre os itens Flexbox criados.

Método 1: Defina a propriedade "Justify-Content" como "espaço-volume"

Um dos métodos é adicionar o “justificar-property”E define como“espaço-around”Para adicionar os espaços ou a distância em torno de cada item do Flexbox:

.flex

Justify-Content: Space-Around;
..

.item

..

O exemplo do código acima indica que há a adição do “Justify-Content”Propriedade que foi definida como“espaço-around”. Os pontos indicam que todas as propriedades permanecem as mesmas aqui adicionadas acima na seção de pré -requisito deste post.

Como resultado, o espaço definido será adicionado em torno dos itens do Flexbox:

Método 2: Defina a propriedade "Justify-Content" como "espaço intermediário"

O outro método é adicionar o “justificar-property”E define como“espaço entre”Para adicionar os espaços ou a distância entre cada item do Flexbox:

.flex

Justify-Content: Space Between;
..

.item

..

O exemplo acima indica que há a adição do “Justify-Content: espaço entre”E todas as propriedades do CSS permanecem as mesmas aqui também.

O exemplo acima adicionará distância entre cada item do Flexbox. No entanto, não haverá distância entre o item mais à esquerda e o mais à direita e o contêiner DIV, porque ele adiciona apenas a distância entre os itens do Flexbox, diferentemente do “espaço-around”:

Isso resume os dois métodos diferentes para definir a distância entre os itens do Flexbox.

Conclusão

Para definir a distância entre os itens do Flexbox, adicione o seletor de ID ou classe no elemento de estilo CSS referente ao elemento pai no qual todos os itens do Flexbox foram criados e defina o ““Justify-Content: espaço entre”Propriedade como“espaço-around" ou "espaço entre”. Este guia do blog sobre os métodos para definir a distância entre os itens do Flexbox.