Flexbox属性什么都不做

我正在尝试使用Flexbox创建导航标题。下面是代码：http://codepen.io/trans/pen/VmeRQx Flexbox属性什么都不做

<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的特性一无所知布局的变化而变化：对齐项，校准内容，证明的内容，似乎都没有做任何事情。

我希望两个最终物品与容器的边缘齐平，并且我希望li可以伸展以填充空的空间。但我无法弄清楚如何。

（PS我认为它的高度必须具有讽刺意味，几十年来被告知不要使用表格，但它们仍然无法提供任何易于使用和响应速度一般的东西。）

来源

2016-11-11 trans

您正在使用哪种浏览器？ –

只要发布这个我回答我自己的问题。诀窍是在li元素中使用flex-grow和flex-basis，例如， flex-grow: 1。

来源

2016-11-11 16:53:27 trans

尝试删除：

margin: auto; /* Magic! */

来自：

header nav li{ 

}

当我做这个的弯曲特性开始工作。

来源

2016-11-11 16:54:19

Flexbox属性什么都不做

回答

相关问题