Flexbox：居中元素，两侧有空间元素

我正在使用 Flexbox 设置一个由七个组成的菜单<li>具有不同宽度的元素。我想要我的中间（源顺序中的第四个）<li>元素始终作为一种锚点水平居中，第 1-3 个元素<li>元素占据居中左侧的空间<li>第 5-7 个占据右侧的空间。

我试过了space-around, space-between在父 Flex 容器上以及align-self: center on the <li>我试图将元素居中，但到目前为止还没有运气。任何熟悉 Flexbox 的人的帮助将不胜感激。

jsfiddle http://jsfiddle.net/g7kCc/26/

您需要修改您的nav结构并从3个容器开始left, center and right. DEMO http://jsfiddle.net/g7kCc/28/

HTML

left and right将保留一些链接，center是一个链接。

<nav>
<span>
    <a href="#">aaa </a>
    <a href="#">aa </a>
    <a href="#">a </a>
    </span>
    <a href="#"> center </a>
    <span>
      <a href="#">bbbb </a>
      <a href="#">bbbbb </a>
      <a href="#">bbbbbb </a>
    </span>
</nav>

CSS

导航将采取display:flex and justify-content:space-between， 所以将left and right.

nav, nav span {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;/* so they do not overlap each other if space too short */
}

在边缘处生成间隙right and left朝向中心，我们只需添加一个伪元素（或空元素）.

span:first-of-type:after,
span:last-of-type:before{
    content:'';
    display:inline-block;/* enough , no width needed , it will still generate a space between */
}

left and right可以采取flex value higher than 1， 避免center过度扩张。

nav > span {
    flex:2; /* 2 is minimum but plenty enough here  */
}

让我们绘制链接框：

a {
    padding:0 0.25em;
    border:solid;
}

DEMO http://jsfiddle.net/g7kCc/28/