css - Flexbox:居中元素，两侧有空格元素

Question

我正在使用 flexbox 设置一个由七个菜单组成的菜单 <li>具有各种宽度的元素。我想要我的中间(源顺序中的第 4 个)<li>元素始终水平居中作为一种 anchor ，第 1-3 个 <li>占据居中左侧空间的元素 <li>第 5-7 个占据右边的空间。

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

jsfiddle

Answer 1

您需要修改您的 nav 结构并从 left、center 和 right 三个容器开始。 <强> DEMO

---

HTML

left 和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

nav 将占用 display:flex 和 justify-content:space-between，left 和 right。

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

left 和 right 可以采用 flex 值 higher 1 ，避免 center 扩展太多。

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

让我们绘制我们的链接框:

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

---

DEMO