Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Agregando espacio con Flexbox

<header class="encabezado">
  <a class="logo" href="#">
    <img src="img/logo.png">
  </a>

  <ul class="menu">
    <li class="menu-item">Item 1 del menu</li>
    <li class="menu-item">Item 2 del menu</li>
    <li class="menu-item">Item 3 del menu</li>
    <li class="menu-item">Item 4 del menu</li>
  </ul>
</header>
.header .encabezado {
    display: flex;
    justify-content: space-between;
}
1 respuesta

¡Hola Angélica!

En tu código, estás utilizando la propiedad justify-content con el valor space-between, lo que significa que el espacio disponible se distribuirá de manera uniforme entre los elementos del contenedor. En este caso, los elementos son el enlace con la imagen y la lista de elementos del menú.

Si deseas agregar más espacio entre estos elementos, puedes utilizar la propiedad padding en el contenedor .encabezado. Por ejemplo:

.header .encabezado {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

De esta manera, agregarás un espacio de 20 píxeles en cada lado del contenedor, lo que dará la sensación de que hay más espacio entre los elementos.

Espero que esto te ayude a resolver tu problema. ¡Buenos estudios!

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