为什么flexbox容器将列表项分成两行？

Question

我有一个弹性元素<header>，其中包含两个弹性项目：<span>和<ul>

我的目标是像这张照片一样在一行中水平显示弹性项目：

但是我得到的结果是： 我发现可以使用flex-basis: 100%;解决我的问题，但是flexbox容器的行为对我来说是无法理解的。

为什么将<li>项分成两行而不是一一显示？

html：

<header>
   <span>LOGO</span>
   <ul>
      <li>Library</li>
      <li>Telegram channel</li>
      <li>Contacts</li>
      <li>Donate</li>
   </ul>
</header>

css：

span {
   border: 1px solid black;
   margin-right: 10px;
}
ul {
   padding: 10px;
}
li {
   display: inline-block;
   padding: 0 5%;
   border: 1px solid black;
}
header {
   display: flex;
   align-items: center;
}

Answer 1

为width:100%使用margin:0和ul

span {
   border: 1px solid black;
   margin-right: 10px;
}
ul {
   padding: 10px;
    margin:0;
    width:100%;
}
li {
   display: inline-block;
   padding: 0 5%;
   border: 1px solid black;
}
header {
   display: flex;
   align-items: center;
}

<header>
   <span>LOGO</span>
   <ul>
      <li>Library</li>
      <li>Telegram channel</li>
      <li>Contacts</li>
      <li>Donate</li>
   </ul>
</header>