Flexbox：居中的元素，两侧各有一个空格元素

Question

我使用flexbox设置一个菜单，其中包含七个<li>个不同宽度的元素。我喜欢我的中间（源顺序中的第4个）<li>元素始终水平居中作为一种锚点，其中1-3个<li>元素占据了左边的空间中心<li>和第5-7位占据右侧空间。

我在父级Flex容器上尝试了space-around，space-between以及{I}尝试居中的align-self: center元素上的<li>，但到目前为止还没有运气。任何知识渊博的人的帮助将不胜感激。

jsfiddle

Answer 1

您需要修改nav结构，并从3个容器 left ， center 和 right 开始。的 DEMO

---

<强> HTML

左和右将包含一些链接， 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和justify-content:space-between，因此左和正确。

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

要在右和左的边缘处向中心生成间隙，我们只需添加一个伪元素（或空元素）。

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 */
}

左和右可以flex值更高而不是1，以避免中心扩展太多了。

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

让我们绘制链接框：

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

---

<强> DEMO

Answer 2

我认为这样做的方法是将项目拆分为三个不同的ul元素，然后使用flex属性设置三列的大小。

外部列中包含三个元素，因此它们得到flex:3。居中的列只有一个元素，因此它得到flex:1。这样，当您调整大小时，flexbox将为较大的列使用3个flex单位，为居中的列使用1个flex单位。如果您需要在任何列中使用不同数量的项目，只需更改flex单位以反映其中的项目数量。

工作小提琴：jsfiddle