es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo se calcula la posición de los elementos derivada del atributo CSS “justify-content: espacio-entre”?

Esto es en parte una curiosidad y en parte algo que realmente necesito usar.

¿Cómo se calculan las posiciones de los elementos derivadas de “justify-content: space-between”?

Como en este ejemplo: https://jsfiddle.net/qrjot0bh/1/

Sé cómo dividir un segmento de línea con 2 vectores, realizar interpolaciones similares a esto:

//C#
using System.Numerics;
...

<p>int amount = 3; // cantidad de elementos
float startSpace = 100; //inicio en X
float endSpace = 900;  //fin espacio
Vector2 vec2Start = new Vector2(startSpace);  //vector de inicio
Vector2 vec2End = new Vector2(endspace);    //vector de fin
Vector2[] arrPossibles = new Vector2[amount];</p>

<p>float divider = 1f / (float)amount;
float linear = 0f;</p>

<pre><code>for (int i = 0; i < amount; i++)
  {
    if (i == 0)
      linear = divider / 2;
    else
      linear += divider;

    arrPossibles[i] = Vector2.Lerp(vec2Start, vec2End, linear);
  }
</code></pre>

<p>//...recorre las posibilidades, considerándolas como puntos centrales de un rectángulo potencial.

Esta es su versión en JavaScript: https://jsfiddle.net/8c9rdejx/6/

Pero como puedes ver, no está “entre”, los primeros y últimos elementos no están al comienzo y al final del contenedor padre respectivo.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Cuando se utiliza justify-content: space-between en CSS, las posiciones de los elementos se calculan distribuyendo de manera uniforme el espacio disponible entre ellos. El primer elemento se alinea con el inicio del contenedor, el último elemento se alinea con el final del contenedor y los elementos restantes se distribuyen uniformemente entre ellos. Esto significa que el espacio entre los elementos será el mismo, pero la distancia desde los bordes del contenedor hasta el primer y último elemento dependerá del número de elementos y del espacio disponible.

    Los cálculos reales para esto los realiza el motor de renderizado de CSS y no son accesibles directamente a través del código. Sin embargo, puedes manipular el espacio disponible ajustando el ancho del contenedor o de los propios elementos, lo cual afectará a las posiciones finales.

Comments are closed.