<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>*/Css*
.encabezado {
display: flex;
justify-content: space-between;
}
¡Hola Jhon!
Para lograr que el menú se ubique al lado derecho y el logo al lado izquierdo, puedes hacer lo siguiente:
.encabezado {
display: flex;
justify-content: space-between;
align-items: center; /* Añade esta línea para centrar verticalmente los elementos */
}
.logo {
order: 1; /* Cambia el orden de los elementos */
}
.menu {
order: 2; /* Cambia el orden de los elementos */
}
De esta manera, con la propiedad order puedes cambiar el orden en que se muestran los elementos en la pantalla. Asignando el valor 1 a la clase .logo y 2 a la clase .menu, lograrás que el logo se muestre primero y el menú después.
¡Espero que te sirva! Si tienes alguna otra pregunta, no dudes en preguntar.
¡Espero haber ayudado y buenos estudios!