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] Colocar logo a la izquierda y menú a la derecha

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 Luis Miguel Escotto Acevedo
| 103.2k xp | 1 posts
Soporte de usuarios y auxiliar de tecnología 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio menu</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="encabezado">
        <a class="logo" href="#">
            <!-- <img src="img/logo.png"> -->
            LOGO
        </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>
.encabezado {
    display: flex;
    justify-content: space-between;
    padding: 2em;
    align-items: center;
}

.menu {
    display: flex;
    gap: 1.5em;
}
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Luis! Para colocar el logo a la izquierda y el menú a la derecha, puedes utilizar la propiedad order de Flexbox. Primero, debes mover el elemento del menú antes del logo en el HTML. Luego, en el CSS, puedes agregar la siguiente regla:

.logo {
    order: 1;
}

.menu {
    order: 2;
}

De esta manera, estás indicando que el logo debe aparecer primero y el menú después. Espero que esto te haya ayudado. ¡Buenos estudios!

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