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

[Sugerencia] Agregando espacio con Flexbox

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Introducción al Flexbox y haciendo el encabezado y actividad Agregando espacio con Flexbox

por IsraelBasurtoSanchez
| 141.7k xp | 85 posts
Estudiante 
<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ejemplo Flexbox</title>
    <link rel="stylesheet" href="flexbox.css">
</head>

<body>

    <header class="encabezado">
        <a class="logo" href="#">
            <img src="img/logo_360Gif.gif">
        </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>

</body>

</html>
/* flexbox.css*/
.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu {
    display: flex;
}

.menu-item {
    margin-right: 2rem;
    background: burlywood;
}

Saludos les dejo mi opinión.

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

¡Hola Israelbasurtosanchez!

Gracias por compartir tu opinión. Si entendí bien, tu sugerencia es agregar espacio entre los elementos del menú utilizando Flexbox.

En este caso, podrías utilizar la propiedad justify-content en el contenedor del menú y establecerla en space-between, lo que agregará un espacio igual entre cada elemento del menú. También puedes ajustar el valor del margin-right en la clase .menu-item para agregar más espacio entre los elementos.

Aquí te dejo el código actualizado:

/* flexbox.css*/
.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu {
    display: flex;
    justify-content: space-between; /* Agregamos espacio entre los elementos */
}

.menu-item {
    margin-right: 2rem; /* Puedes ajustar este valor para agregar más espacio */
    background: burlywood;
}

Espero que esto te ayude a resolver tu problema. 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! :)