Split menu navigation with flexbox layout?

Question

My header consists of only the <nav> element.

How can I achieve a layout like in this picture using only a flexbox layout?

Currently, I achieved this layout by setting the a display: inline-block to <li> elements and then moved the logo to the left with float: left and the last two menu items to the right with float: right CSS properties.

I would like to know if this is possible in flexbox layout.

I know that setting the margin-right: auto would move the Logo menu item to the left.

But setting margin-left: auto to last two menu items wouldn't work, because they would not be next to each other.

Here is the full code:

HTML:

<header>
<nav>
  <ul>
    <li class="left">Logo</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="right">Item 5</li>
    <li class="right">Item 4</li>
  </ul>
</nav>

CSS

body {
  max-width: 950px;
  margin: 0 auto;
}

header {
  padding: 30px 10px;
  border-bottom: 1px solid grey;
}

nav ul {
  list-style-type: none;
  text-align: center;
}

nav ul li {
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: right;
  margin-left: 10px;
}

score 0 · Answer 1 · answered Oct 19 '22 at 14:03

Use this.

<style>
    body {
        max-width: 950px;
        margin: 0 auto;
    }

    header {
        padding: 30px 10px;
        border-bottom: 1px solid grey;
    }

    nav ul {
        list-style-type: none;
        text-align: center;
        display: flex;
        align-items: center;
    }

    nav li:nth-child(2) {
        margin-left: auto;
    }

    nav li:nth-child(5) {
        margin-left: auto;
    }
</style>

Ahmed · Answer 2 · 2022-10-19T14:31:41.473

body {
    max-width: 950px;
    margin: 0 auto;
  }
  
  header {
    padding: 30px 10px;
    border-bottom: 1px solid grey;

  }
  
  .flex{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  nav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }
  
  nav ul li {
    margin:0 5px;
  }

<header>
        <nav>
          <ul>
            <div class="logo">
                <li >Logo</li>
            </div>
            <div class="flex">
               <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li> 
            </div>
            <div class="flex">
               <li >Item 5</li>
                <li>Item 4</li> 
            </div>
            
          </ul>
        </nav>
    </header>

Split menu navigation with flexbox layout?

2 Answers2