如何使用CSS将导航栏最后两个li元素移至右侧？

需求说明 #

需要将导航栏中的cart图标和login这两个<li>元素移至右侧（参考Figma导航栏样式），且不使用Bootstrap实现。

现有代码 #

CSS代码

.navbar {
  display: flex;
  gap: 28px;
  list-style-type: none;
  padding-left: 145px;
  background: linear-gradient(to right, #EEEEEE, #999999);
  height: 30px;
  align-items: center;
}

.search {
  color: #EEEEEE;
}

HTML代码

<nav>
  <ul class='navbar'>
    <li><b>Ecommerce</b></li>
    <li>Shop</li>
    <li>Stories</li>
    <li>About</li>
    <li class='search'><i class="fas fa-search"></i>Search</li>
    <li class='cart'><i class="fa-solid fa-cart-shopping"></i></li>
    <li class='login'>Login</li>
  </ul>
</nav>

解决方法 #

利用Flex布局的margin-left: auto特性，无需依赖Bootstrap即可实现元素右移：

修改CSS，给.cart类添加自动左外边距：

.navbar {
  display: flex;
  gap: 28px;
  list-style-type: none;
  padding-left: 145px;
  background: linear-gradient(to right, #EEEEEE, #999999);
  height: 30px;
  align-items: center;
}

.search {
  color: #EEEEEE;
}

.cart {
  margin-left: auto;
}

原理说明 #

在Flex容器中，设置margin-left: auto的元素会自动占据容器内剩余的所有可用空间，从而将自身及后续的同级元素（这里的login）一并推到容器的右侧，完美实现导航栏元素的左右分布效果。

内容的提问来源于stack exchange，提问作者user29930858