CODEWITHSUNDEEP
htmlcssflexbox
v4ss
v4ss

Reputation: 55

Css Flexbox Navbar Right Align

basically what I am trying to do is to implement a navigator in css without using float/clearfix. Instead I am using a better approach, css3's flexbox. I know it's simple to align items to the left easily but what's the optimal solutions for having a narbar which has two aligned regions ?

Something like:

[Home]-[Stuff]------------[Credits]-[About]

This was my attempt implementing this:

https://jsfiddle.net/asss321/ornontbt/

Basically the idea is to wrap two flexboxes into one and set the right flexbox to:

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

Is this a good way to do it ? Or I am using some hacky way ?

Upvotes: 4

Views: 10524

Answers (2)

Ramanuj
Ramanuj

Reputation: 1

So for moving the nav items to the right in the Navbar component, we can use CSS flexbox properties for the same. The basic approach whenever you encounter any situation like this is to find it's parent element. Here the parent element, in this code is "header" which has a logo and some nav-items. For shifting nav-items to right, we will apply "justify-content: space-between;" to the header. This will push nav-items to the right

Upvotes: 0

Oriol
Oriol

Reputation: 288140

Your way is not a bad one. However, using nested elements may be unnecessary.

.container {
  display: flex;
  border: solid 1px black;
}
.container > :nth-child(2) {
  margin-right: auto;
}
a {
  padding: 10px;
}
<div class="container">
  <a href="#">Start</a>
  <a href="#">Extra</a>
  <a href="#">Credits</a>
  <a href="#">About</a>
</div>

Upvotes: 7

Related Questions