I needed help with flexbox positioning

Asked

Viewed 18 times

0

<div class"container">      
<header>
<nav class="menu">
    <h1 class="logo">Commerce</h1>
    <ul class=menuLinks>
        <li><a>Option1</li></a>
        <li><a>Option2</li></a>
        <li><a>Option3</li></a>
        <li><a>Option4</li></a>
        <li><a>Option5</li></a>
    <ul>
<nav>
<header>

I wanted to align the "logo" part on the left of the menu, and the part of the class "menulinks" to be on the right and also to separate the "menulinks" with the logo type a margin, and also to occupy 90% of the class "menu" in a way that did not break the code using flexbox, currently I find it difficult to do this type of positioning!

1 answer

0

Hello. I suggest searching a little about the property justify-content. From what I understand you want something like this:

header {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
<div class"container">      
<header>
<h1 class="logo">Commerce</h1>
<nav class="menu">
    <ul class=menuLinks>
        <li><a>Option1</li></a>
        <li><a>Option2</li></a>
        <li><a>Option3</li></a>
        <li><a>Option4</li></a>
        <li><a>Option5</li></a>
    <ul>
<nav>
<header>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.