我想通过 css 创建以下菜单样式答案

【问题标题】：I want to create the following menu style by css我想通过 css 创建以下菜单样式
【发布时间】：2017-11-15 16:41:28
【问题描述】：

你可以看到，

|导航 --- 标志 --- 信息 |

这是我想要的移动风格。

Nav 左对齐。

徽标居中对齐。

信息右对齐。

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>

我必须为每个项目实现哪些样式才能得到我想要的？

请，谢谢。

【问题讨论】：

你有尝试过吗？研究是在Stack Overflow 上提问的先决条件。
对不起，我不能

标签： html css styles navbar bootstrap-4

【解决方案1】：

到目前为止，最简单的方法是使用flexbox。要将其限制在移动设备上，您需要将其包装在 @media 查询中，对于 Bootstrap，该查询低于 768px

#navbar {
  /* 
   * place non-mobile styles here
   * For example, to hide the navbar outside mobile...
   */
   display: none;
}
@media (max-width: 767px) {
  #navbar {
    display:flex;
    justify-content: space-between;
    align-items: center; /* optional, to center vertically */
  }
}

<div id="navbar">
  <div class="item">Nav</div>
  <div class="item">Logo</div>
  <div class="item">Info</div>
</div>

【讨论】：

【解决方案2】：

使用flexbox 使父级伸缩并在内容周围留出空间。

Fiddle

.navbar{
  max-width: 600px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

<header class="navbar">
  <div class="menu">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <div class="logo">
    <img src="https://placehold.it/88x88" alt="logo">
  </div>
  <div class="info">
    <p> Info about the website </p>
  </div>
</header>

【讨论】：

请问您为什么认为在菜单上硬编码width 和height 是个好主意？真的不是。您的菜单在屏幕宽度低于600px 的移动设备上看起来很糟糕。
我没有这么说。我只是为了代表。
您在Stack Overflow 上回答。隐含地，您正在为所有未来遇到相同问题的访问者树立榜样。你的回答是“这是正确的方法，应该怎么做”。考虑使用最佳实践提供答案，并尽量不要做出假设。这样你的答案就会帮助更多的人。
注明。感谢您的意见。