CSS Flexbox 不向右浮动

Question

我正在为 flexbox 苦苦挣扎，正在寻求一些帮助来启动和运行我的导航栏。

我有以下代码，导航栏左侧应该有我的徽标 + 标题，右侧有一个选项菜单。知道为什么我的 flexbox 都是左对齐的，而 item--4 没有向右浮动吗？

.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/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="flex-container">
    <div class="flex-item">
      <a class="navbar-brand" 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" class="mr-2 mt-n1"> Title
      </a>
    </div>
    <div class="flex-item--4">
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Account</a></li>
              <li><a class="dropdown-item" href="#">Settings</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 1

将flex-grow: 1 添加到您的flex-item--4 元素意味着它会扩展以填充可用空间。没有剩余空间可供边距占用。

删除flex-grow: 1，元素会被推到右边。

出于某种原因，我还必须将 width:100% 添加到 flex-container - 我假设 Bootstrap 样式限制了宽度。

.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/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="flex-container">
    <div class="flex-item">
      <a class="navbar-brand" 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" class="mr-2 mt-n1"> Title
      </a>
    </div>
    <div class="flex-item--4">
      <div class="collapse navbar-collapse show" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Account</a></li>
              <li><a class="dropdown-item" href="#">Settings</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Answer 2

添加width: 100%; 使其全宽，并将flex-grow: 0 添加到菜单中不让它填充剩余空间，但右对齐。 margin-auto: left 已经正确对齐了。

.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/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <div class="flex-container">
    <div class="flex-item">
      <a class="navbar-brand" 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" class="mr-2 mt-n1"> Title
      </a>
    </div>
    <div class="flex-item--4">
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Hello {{ request.user.get_full_name|default:request.user }}!
                        </a>
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item" href="#">About</a></li>
              <li><a class="dropdown-item" href="#">Account</a></li>
              <li><a class="dropdown-item" href="#">Settings</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="{% url 'account:logout' %}"> Sign Out</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>