Bootstrap 4 flexbox error

Question

, I'm triying to use the flexbox options in the recent version of bootstrap 4...and I want to set some spaces on my nav elements...this, using the flexbox classes made by bootstrap...here is the navbar example show on bootstrap documentation I just added the classes I need to the end of nav element but nothing happens...the brand element and the list are not moving at all...HELP PLS !

https://v4-alpha.getbootstrap.com/utilities/flexbox/

<nav class="navbar navbar-toggleable-md navbar-light d-flex justify-content-end flex-row ">
                    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand align-self-start" href="#">Navbar</a>
                    <div class="collapse navbar-collapse" id="navbarNav">
                          <ul class="navbar-nav">
                                <li class="nav-item dropdown active">
                                      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Portada
                                      </a>
                                      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                            <a class="dropdown-item" href="#">Nosotros</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                </li>
                                <li class="nav-item">
                                      <a class="nav-link" href="#">Nosotros</a>
                                </li>
                                <li class="nav-item dropdown">
                                      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Soluciones
                                      </a>
                                      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                            <a class="dropdown-item" href="#">Nosotros</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                      </div>
                                </li>
                                <li class="nav-item">
                                      <a class="nav-link" href="#">Clientes</a>
                                </li>
                          </ul>
                    </div>
              </nav>

Answer 1

The reason justify-content: flex-end; doesn't work currently is because #navbarNav is width: 100%; which means it is taking up all of the available space in nav.navbar, leaving no room to shift the children of nav.navbar to the flex-start or flex-end. One way you can get nav.navbar to align it's flex-items to flex-end is assign width: auto; to #navbarNav, which will free up space to shift the children of nav.navbar to the flex-start or flex-end.

#navbarNav {
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light d-flex justify-content-end flex-row ">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                    </button>
  <a class="navbar-brand align-self-start" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item dropdown active">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Portada
                                      </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Nosotros</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nosotros</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Soluciones
                                      </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Nosotros</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Clientes</a>
      </li>
    </ul>
  </div>
</nav>