html - Flexbox属性什么也不做

我正在尝试使用Flexbox创建导航头。这是代码：http://codepen.io/trans/pen/VmeRQx

<header>
  <nav>
    <ul>
      <li><a class="block" href="/index.html"><span class="title">⭾ T a b</span></a></li>
      <li><a class="block" href="/products/index.html">Products</a></li>
      <li><a class="block" href="/research/index.html">Research</a></li>
      <li><a class="block" href="/advocacy/index.html">Advocacy</a></li>
      <li><a class="block" href="/support/index.html">Support</a></li>
    </ul>
  </nav>
</header>

和CSS：

header {
  background: #222;
  padding: 0.5em;
  color: white;
}

header nav {
  width: 1080px;
  margin: 0 auto;
  border: 1px solid yellow;
}

header nav .title {
  color: white; font-size: 2em;
}

header nav a {
 color: white;
}

header nav ul {
  display: flex; /* or inline-flex */
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between;
  list-style: none;
  list-style-type: none;
  padding: 0;
}

header nav li {
  margin: auto;  /* Magic! */
  border: 1px solid green;
}

不管我在flexbox属性中进行了什么更改，布局更改都没有：align-items，align-content，justify-content似乎都不起作用。

我希望两个末端物品与容器的边缘齐平，并且我希望li可以伸展以填充空白区域。但是我不知道怎么做。

（P.S.我认为必须讽刺的是，数十年来被告知不要使用表之后，他们仍然无法提出任何既易于使用又通常没有响应能力的表。）

最佳答案

尝试删除：

margin: auto;  /* Magic! */

从：

header nav li{

}

当我这样做时，flex属性开始起作用。

关于html - Flexbox属性什么也不做，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40552533/