Items flex item左對齊和右對齊，當瀏覽器window縮小時如何居中？

Question

我有一個帶有 3 個彈性項目的導航欄，如下所示，我似乎無法弄清楚垂直折疊時如何使容器居中。

當我縮小瀏覽器時，結果是 -

當瀏覽器折疊時，如何將 B 徽標以及底部的圖標容器居中以垂直居中到中間？

代碼如下：

    <nav class = "navlinks">
    
    <img src="/bootstrap-clone/Images/bootstrap-logo-3C30FB2A16-seeklogo.com.png" alt="bootstraplogo" id="bootstraplogo">
      
    <ul class="leftbar">
        <li><a href="#"> Home</a></li>
        <li><a href="#"> Documentation</a></li>
        <li><a href="#"> Examples</a></li>
        <li><a href="#"> Icons</a></li>
        <li><a href="#"> Themes</a></li>
        <li><a href="#"> Expo</a></li>
        <li><a href="#"> Blog</a></li>
      </ul>

   

    <ul class="rightbar">
      <li><a href="#"><img src="/bootstrap-clone/Images/github.svg" alt="github"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/twitter.svg" alt="twitter"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/slack.svg" alt="slack"></a></li>
      <li><a href="#"><img src="/bootstrap-clone/Images/google.svg" alt="google"></a></li> 
      <li><a href="#"><button class="btn download">Download</button></a></li>
    </ul>

  </nav>

  </header>

    background-color: white;
    margin:0; 
    padding:0;
    font-family:Arial, Helvetica, sans-serif 
}

.navlinks {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px;
    background-color: rgb(121,82,179);
    height: auto;
    flex-wrap: wrap;
  }

  .leftbar{
      padding: 10px; 
      flex-shrink: 0;
  }

  .leftbar li {
    display: inline-block; 
    padding: 5px;
  }

  .leftbar li a {
    text-decoration: none;
    color: rgb(236,231,244); 
    font-family: Helvetica, sans-serif;
    font-weight:400;
  }

  .rightbar li {
      display:inline-block;
      padding: 8px;
      padding-bottom: 0px; 
  }

  .rightbar{
    margin-left: auto;
    padding: 5px; 
  }

Answer 1

只需使用純 CSS 的媒體查詢：

@media only screen and (max-width: 992px) {
    .navlinks{
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    ul{
        margin: auto;
    }
}

看一個例子