Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

267
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda