Left, center and right align elements with flex and different width [duplicate] - html

Question

This question already has answers here:
Center a flex item in a row when there are a different number of items on each side
(5 answers)
Closed 5 years ago.
JSFiddle
The point is to make left ul with max-width align left, center block without specified width be always centered (content of this ul may vary) and right ul be always floated to right with max-width in my top navbar.
The main problem is that when I specify widths for ul's flex properties dont't work as I expect: 3rd ul must be aligned to right while the 2nd should take as much space as posible in one line. It's ok with alignment but 3rd ul takes too much space (more than needed) and visually isn't floated to right. If a specify it's width to fix this center aligmnment of 2nd ul won't work. All elements have different width, as far as I know flex can handle only elements with equal width.
However, I guess this is a right bahaviour for flex.
HTML
<nav class="nav_wrapper" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li data-item-id="nav-profile-menu">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li data-item-id="nav-profile-menu">
<a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd">
<span class="summary-item">USD</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,0474</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu">
<a class="summary">
<span class="summary-item">Brent</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,86%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Ni</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
105,00 <span class="small-text hidden-sm hidden-xs">1,29%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Al</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
2131,50 <span class="small-text hidden-sm hidden-xs">0,35%</span>
</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-auth">
<li data-item-id="nav-profile-menu">
<span>reg</span> <i class="fa fa-user-plus"></i><span></span>
</li>
<li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom">
<span>auth</span> <i class="fa fa-sign-in"></i>
</li>
</ul></nav>

Answer 1

why you don't use flex + absolute and u use float?
Much cleaner and no need for clear after floats.
.nav_wrapper {
position: relative;
display: flex;
justify-content: center;
}
.navbar-left {
position: absolute;
left: 0;
}
.navbar-auth {
position: absolute;
right: 0;
}
and you can remove the width of ul