Почему контейнер flexbox разделяет элементы списка на две строки?

Question

У меня есть элемент flex <header>, который содержит два элемента flex: <span> и <ul>

Моя цель состоит в том, чтобы отображать элементы Flex по горизонтали в одну строку, как на этой фотографии:

но результат, который я получаю: Я понял, что моя проблема может быть решена с помощью 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>