对于无序列表中的项目，柔性盒是否有不同的工作方式？

Question

我正在努力学习如何使用flexbox，并且我正在努力用一个无序的列表来正确地使用它。我希望里面的物品在容器中“散开”，但不管我应用了什么弹性属性，它们似乎都不起作用。下面的代码。

为什么列表中的项目不在容器中突出？所有的盒子，边框和颜色都是为了我自己的视觉修复。

​

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>

​