margin-right auto在使用display:flex时不工作

Question

我正在尝试使用flexbox但margin-right:auto;或margin-left:汽车;不工作，下面是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容器一个justify-content: space-between;属性来横向展开项目，如下所示:

* {
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>