Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

265
Visualizações
Get value of the spacing between elements in justify-content:space-between

I need to get the amount of spacing between elements in my container which has the justify-content: space-between; property.

Is there any way to do it in Javascript/CSS ? I searched but found nothing...

Thanks !

about 4 years ago · Santiago Gelvez
2 Respostas
Responde à pergunta

0

You can get the offsetWidth of the container and your two elements. After that just do the maths

var diff = conatiner.offsetWidth - elementA.offsetWidth - elementB.offsetWidth
console.log(diff)

Check the working JSFiddle link here. Try resizing the screen width and you can see the distance between the blocks being changed. and it displays the new distance between the blocks

about 4 years ago · Santiago Gelvez Relatório

0

What I finally did is creating a function to calculate it :

This solution only works if all items in your container have the same size (which was my case)

const calculateSpaceBetween = () => {

    let container = document.querySelector("your container");
    let containerWidth = container.offsetWidth;
    let containerItems = container.children;
    let containerItemsWidth = containerItems[0].offsetWidth;
    let containerItemCount = containerItems.length;

    let spaceBetween = (containerWidth - containerItemsWidth * containerItemCount) / containerItemCount;

    return spaceBetween

To make sure it handles responsive, trigger it in an eventListener like so :

window.addEventListener("resize", calculateSpaceBetween);
about 4 years ago · Santiago Gelvez Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda