CSS Flexbox Not Floating to Right-CodePudding

I am struggling with flexbox and am looking for some help getting my navbar up and running.

I have the following code that should have my logo title on the left of the navbar and a menu of options on the right side. Any idea why my flexbox is all left justified and the item--4 is not floating over to the right?

.flex-container {
  background: #eee;
  display: flex;
}

.flex-item {
  background: orangered;
  color: white;
}

.flex-item--4 {
  flex-grow: 1;
  margin-left: auto;
  background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav >
  <div >
    <div >
      <a  style="padding-left: 20px;" href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
        <img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" > Title
      </a>
    </div>
    <div >
      <div  id="navbarNavDarkDropdown">
        <ul >
          <li >
            <a  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul  aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a  href="#">About</a></li>
              <li><a  href="#">Account</a></li>
              <li><a  href="#">Settings</a></li>
              <li>
                <hr >
              </li>
              <li><a  href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

CodePudding user response：

Adding flex-grow: 1 to your flex-item--4 element means it expands to fill the available space. There is no space remaining for the margin to take up.

Remove flex-grow: 1, and the element will be pushed to the right-hand side.

For some reason, I also had to add width:100% to the flex-container - I'm assuming a Bootstrap style is limiting the width.

.flex-container {
  background: #eee;
  display: flex;
  width: 100%;
}

.flex-item {
  background: orangered;
  color: white;
}

.flex-item--4 {
  margin-left: auto;
  background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav >
  <div >
    <div >
      <a  style="padding-left: 20px;" href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
        <img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" > Title
      </a>
    </div>
    <div >
      <div  id="navbarNavDarkDropdown">
        <ul >
          <li >
            <a  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul  aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a  href="#">About</a></li>
              <li><a  href="#">Account</a></li>
              <li><a  href="#">Settings</a></li>
              <li>
                <hr >
              </li>
              <li><a  href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

CodePudding user response：

Add width: 100%; to have it full width, and flex-grow: 0 to the menu to not let it fill the remaining space, but right-align. margin-auto: left already does the right alignment.

.flex-container {
  background: #eee;
  display: flex;
  width: 100%;
}

.flex-item {
  background: orangered;
  color: white;
}

.flex-item--4 {
  flex-grow: 0;
  margin-left: auto;
  background: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav >
  <div >
    <div >
      <a  style="padding-left: 20px;" href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
        <img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" > Title
      </a>
    </div>
    <div >
      <div  id="navbarNavDarkDropdown">
        <ul >
          <li >
            <a  href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul  aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a  href="#">About</a></li>
              <li><a  href="#">Account</a></li>
              <li><a  href="#">Settings</a></li>
              <li>
                <hr >
              </li>
              <li><a  href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>