Question

我正在尝试使用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，似乎一切都没有。

我希望两个最终物品与容器的边缘齐平，我希望拉伸以填充空白区域。但我无法弄清楚如何。

（PS我认为必须是具有讽刺意味的高度，经过几十年被告知不要使用表格后，他们仍然无法提出任何易于使用且通常都具有响应性的内容。）

Answer 1

尝试删除：

margin: auto;  /* Magic! */

从：

header nav li{

}

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

Answer 2

发布此消息后，我会回答我自己的问题。诀窍是在flex-grow元素中使用flex-basis和li，例如flex-grow: 1。

Flexbox属性不执行任何操作

2 个答案: