CODEWITHSUNDEEP
htmlcssflexboxalignment
brainmassage
brainmassage

Reputation: 1254

Flexbox navigation with some items are on the left and some items on the right

I am trying to build a basic navigation where some of the links sit on the left and some of them on the right. By researching some of the answers here, I found the below solution in the jsfiddle. But they have so much space between everything. I just want left-most and right-most items have very little space between each other, and there should be a huge gap in the center.

HTML:

<ul class="main-nav">
    <li class="left"><a class="links-main" href="#">Left1</a></li>
    <li class="left"><a class="links-main" href="#">Left2</a></li>
    <li class="left"><a class="links-main" href="#">Left3</a></li>

    <li class="right"><a class="links-main" href="#">Right1</a></li>
    <li class="right"><a class="links-main" href="#">Right2</a></li>
    <li class="right"><a class="links-main" href="#">Right3</a></li>
    <li class="right"><a class="links-main" href="#">Right4</a></li>

</ul>

CSS:

ul.main-nav {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li.left 
{
    margin-right: auto;
}

li.right 
{
    margin-left: auto;
}

.links-main {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

JsFiddle

Upvotes: 1

Views: 363

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Add margin-left: auto to the first right element only - see demo below:

ul.main-nav {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

/*
li.left
{
    margin-right: auto;
}

li.right
{
    margin-left: auto;
}
*/
li.left + li.right {
  margin-left: auto;  
}

.links-main {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
<ul class="main-nav">
    <li class="left"><a class="links-main" href="#">Left1</a></li>
    <li class="left"><a class="links-main" href="#">Left2</a></li>
    <li class="left"><a class="links-main" href="#">Left3</a></li>
    
    <li class="right"><a class="links-main" href="#">Right1</a></li>
    <li class="right"><a class="links-main" href="#">Right2</a></li>
    <li class="right"><a class="links-main" href="#">Right3</a></li>
    <li class="right"><a class="links-main" href="#">Right4</a></li>

</ul>

Upvotes: 4

Related Questions