为什么是正当内容:灵活启动;不工作

Question

我用flexbox制作了一个导航栏。默认情况下，justify内容属性是否应该设置为flex start？但我的容器中的内容并不是从一开始就开始的。这是输出和代码：

html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}

<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>

Answer 1

空白是由<ul>的默认填充引起的。您可以通过添加：ul { padding-left: 0; }来删除它

html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
padding-left: 0;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}

<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>