Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

Formas de espaciar los elementos

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

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ; }

Podemos ocupar una de estas propiedades para distribuir el espacio entre los elementos.

Ejemplo:

HTML

<section class="main-container option1">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>
<section class="main-container option2">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>
<section class="main-container option3">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>
<section class="main-container option4">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>
<section class="main-container option5">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>
<section class="main-container option6">
  <div class="container item1">Item1</div>
  <div class="container item2">Item2</div>
  <div class="container item3">Item3</div>
</section>

CSS

.main-container{
  background-color: #f1faee;
  display:flex;
  gap: 1em;
  padding: 2em;
  border: 1px solid black;
  margin-bottom: 2px;
}
.option1 {
  justify-content: flex-start;
}
.option2 {
  justify-content: flex-end;
}
.option3 {
  justify-content: center;
}
.option4 {
  justify-content: space-beetween;
}
.option5 {
  justify-content: space-around;
}
.option6 {
  justify-content: space-evenly;
}
.container {
  height: 50px;
  width: 100px;
  border-radius: 15px;
  color: white;
  display: flex;
  justify-content:center;
  align-items: center;

}
.item1 {
  background-color:#023047;
}
.item2 {
  background-color:#ffb703;
}
.item3 {
  background-color:#fb8500;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

Hola Camilo, espero que estés bien! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

Si este post te ayudó, por favor, marca como solucionado ✓.

gracias por el dato