Issue
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 ?
Solution
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>
Answered By - Oriol
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.