How to place only certain items in a flexbox to the right? [duplicate]
My navbar has 5 items and I'd like to place only two of them to the right - so they'd look as if they were 'aligned' to the right. I tried it with the margin-left: auto; rule inside the .right rule block, but that didn't quite work. How should I approach this problem?
* {
box-sizing: border-box;
margin: 0;
padding:0
}
#flex-nav {
display: flex;
flex-direction: row;
align-items: center;
}
.right {
margin-left: auto;
} <div id='flex-nav'>
<a href='#'>Home</a>
<a href='#'>News</a>
<a href='#'>About</a>
<a class='right' href='#'>Sign-in</a>
<a class='right' href='#'>Sign-up</a>
</div>You only need to apply the right class to the first one to be pushed over.
* {
box-sizing: border-box;
margin: 0;
padding:0
}
#flex-nav {
display: flex;
flex-direction: row;
align-items: center;
}
.right {
margin-left: auto;
} <div id='flex-nav'>
<a href='#'>Home</a>
<a href='#'>News</a>
<a href='#'>About</a>
<a class='right' href='#'>Sign-in</a>
<a href='#'>Sign-up</a>
</div>