Question

我希望导航栏位于顶部，左侧为左侧，右侧为中间，右侧为右侧。

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

.flex-container {
  width: 100%;
}

.flex-container ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-container li {
  border: 1px solid red;
}

.flex-container nav ul .nytl {
  width: 189px;
  height: 26px;
}

.flex-container nav ul .first {
  justify-content: flex-start;
}

hr {
  margin-top: 10px;
}

<div class="flex-container">
  <nav>
    <ul>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
        </a>
      </li>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
        </a>
      </li>
      <li class="left"><a href="#">SPACE & COSMOS</a>
      </li>
      <li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
      <li class="right"><button>Subscribe</button> .
      </li>
      <li class="right"><button>Login</button></li>
    </ul>
  </nav>
  <hr>
</div>

Answer 1

尝试使用auto边距将左右元素推离中间元素。

（此外，由于您使用的是HTML5 nav元素和CSS3属性，因此您实际上不需要ul来构造布局。您可以大大简化代码。）

nav {
  display: flex;
  align-items: center;
}

nav > * {
  border: 1px solid red;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

hr {
  margin-top: 10px;
}

* {
  padding: 0;
  margin: 0;
}

<nav>
  <a href="#">
    <img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
  </a>
  <a href="#">
    <img src="https://img.icons8.com/material-rounded/16/000000/search.png">
  </a>
  <a href="#">SPACE & COSMOS</a>
  <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  <button>Subscribe</button>
  <button>Login</button>
</nav>
<hr>

在此处详细了解auto边距：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

这是您可能会发现有用的另一种flex方法：

Aligning Three Divs Horizontally Using Flexbox

您现在可能会遇到另一个问题：因为诸如auto边距，justify-content和align-items之类的弹性功能通过分配可用空间而起作用，所以中间项可能不能完全居中。有关更多详细信息和解决方案，请参见以下帖子：

Answer 2

我会利用flex的space-between属性带来的justify-content选项。您必须注意出于SEO目的列出代码的方式，而不是放在任何位置并css重新放置所有内容。它应该首先以自然顺序级联。

.flex-thirds {
  display: flex;
  justify-content: space-between;
}

.flex-thirds .col {
  width: 32%;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

<div class="flex-thirds">
  <div class="col">
    <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
    </a>
    <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
    </a>
    <a href="#">SPACE & COSMOS</a>
  </div>
  <div class="col">
    <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  </div>
  <div class="col">
    <button>Subscribe</button>
    <button>Login</button>
  </div>
</div>

您可以在css-tricks处找到有关justify-content的更多信息

左右对齐我的弹性项目

2 个答案: