使用显示器时，保证金右翼汽车无法正常工作：flex

Question

我正在尝试制作一个Navbar UISNG Flexbox，但透视权：自动；或左键：自动；不起作用，BEL0W是HTML和CSS代码 HTML

   <div class="nav">
        <ul class="navbar">
            <li>
                <h1 id="logo">SocialNetwork</h1>
            </li>
            
            <li>
                <form  class="search">
                    <input type="text" >
                    <input type="submit" value="search">
                </form>
            </li>
            
            <li><img class="profile-photo" </li>
            <li><a id="username" href="{% %}">
                    <h3 id="user">username</h3>
                </a></li>
            
    
        </ul>
    </div>

CSS

*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
.navbar{
    display: flex;
    align-items: center;
    width:100%;   
}

.profile-photo{
    margin-right: auto;
}

Answer 1

您可以通过给父flex容器A josify-content：space-bettem;属性这样的水平分散项目：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.navbar {
  display: flex;
  padding: 1rem;
  background-color: #eee;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.profile-photo {
  margin-right: auto;
}

<div class="nav">
  <ul class="navbar">
    <li>
      <h1 id="logo">SocialNetwork</h1>
    </li>

    <li>
      <form class="search">
        <input type="text">
        <input type="submit" value="search">
      </form>
    </li>

    <li><img class="profile-photo" </li>
      <li>
        <a id="username" href="{% %}">
          <h3 id="user">username</h3>
        </a>
      </li>
  </ul>
</div>