0

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&nbsp;<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>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
                  99&nbsp;<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>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
                  105,00&nbsp;<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>&nbsp;
                <span>
                    <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
                  2131,50&nbsp;<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">
            <a href="/auth" data-toggle="modal" data-target="#login" id="reg-in" class="inline-block">                          <span>reg</span>&nbsp;<i class="fa fa-user-plus"></i></a><span></span>
        </li>
        <li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom">
            <a href="/auth" data-toggle="modal" id="sign-in" data-target="#login" class="inline-block">                          <span>auth</span>&nbsp;<i class="fa fa-sign-in"></i></a>
        </li>
    </ul></nav>
Max Box
  • 1
  • 1
  • I cannot see any problem here: this seems to work as I'd expect to. Can you add some more details to what you expect and what is not working as you expect. – sjahan Sep 27 '17 at 07:48
  • Maybe it is a problem with negative margins: `.navbar-nav {margin: 7.5px -15px;}`. Try to remove that. – Huelfe Sep 27 '17 at 07:59
  • @sjahan 3rd ul has much more width than needed and is not aligned to right visually. – Max Box Sep 27 '17 at 14:24
  • @MaxBox remove `flex: 1 auto` from `.navbar-auth` and add `flex: none` so that the 3rd ul can keep the size of its content ;) the flexbox works properly, but by setting `flex: 1`, the width of the element is managed by the flexbox and not by its content (and its content is aligned on the left, and not on the right, which is why you loose some space). – sjahan Sep 27 '17 at 14:53

1 Answers1

0

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

Mike Trinh
  • 1,271
  • 2
  • 9
  • 19