flexbox与无序列表中的项目的工作方式不同吗

Question

我正在努力学习如何使用flexbox，但我很难在无序列表中正确使用它。我希望里面的物品"；展开"；在容器中，但无论我应用什么flex属性，它们似乎都不起作用。下面的代码。

为什么列表项没有在容器中拼写出来？所有的框、边框和颜色都是为了我自己的视觉再现。

body {
background-color: black;
box-sizing: border-box;
}
header {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
}
h1 {
color: white;
background-color: blue;
}
ul {
background-color: blue;
display: flex;
list-style: none;
justify-content: space-evenly;
}
li {
border: 1px solid red;
}

<header>
<div>
<h1>Sample Logo</h1>
</div>
<div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>Contacts</li>
<li>Companies</li>
<li>Calendar</li>
</ul>
</nav>
</div>
</header>

Answer 1

ul有填充。在ul上加一些宽度，间距就会起的作用

body {
background-color: black;
box-sizing: border-box;
}
header {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
}
h1 {
color: white;
background-color: blue;
}
ul {
border:solid 1px black;
display: flex;
width:50vw;

list-style: none;
justify-content: space-between;
}
li {
border: 1px solid red;
}

<header>
<div>
<h1>Sample Logo</h1>
</div>
<div>
<nav class="navbar">
<ul>
<li>Home</li>
<li>Contacts</li>
<li>Companies</li>
<li>Calendar</li>
</ul>
</nav>
</div>
</header>