Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Formas de espaciar los elementos

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Footer y controlando mejor los elementos y actividad Formas de espaciar los elementos

por Angélica delos Ángeles Juárez Mora
| 86.2k xp | 110 posts
Estudiante

**Sabemos que la propiedad justify-content: space-between hace que el espacio que queda en nuestro elemento padre se distribuya entre los hijos, pero por supuesto ese no es el único valor de la propiedad justify-content. Por ejemplo, ¿de qué otras formas podemos distribuir este espacio? space around,center, flex-end,

****¿Cuál es el valor de la propiedad justify-content para estas distribuciones de espacio?space around.

1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Angélica!

Gracias por tu pregunta. Efectivamente, la propiedad "justify-content" tiene varios valores que permiten distribuir el espacio disponible en un contenedor entre sus elementos hijos. Además del valor "space-between", que distribuye el espacio entre los elementos, existen otros tres valores que puedes utilizar para lograr diferentes distribuciones:

  • "space-around": distribuye el espacio alrededor de los elementos, de manera que haya un espacio igual entre cada par de elementos y también en los extremos del contenedor.
  • "center": coloca los elementos en el centro del contenedor, sin distribuir el espacio sobrante.
  • "flex-end": coloca los elementos al final del contenedor, sin distribuir el espacio sobrante.

Es importante mencionar que estos valores solo aplican si el contenedor tiene espacio disponible después de colocar los elementos. Si los elementos llenan todo el espacio disponible, no habrá espacio que distribuir.

¡Espero que esta información te haya sido útil! Si tienes alguna otra duda, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)