Flexbox布局：居中元素，两侧是间隔元素。

Question

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

我尝试在父级flex容器上使用space-around、space-between以及在我尝试居中的<li>元素上使用align-self: center，但迄今为止没有成功。希望懂得flexbox的人能提供帮助。

jsfiddle

- Marcatectura

Answer 1

您需要修改您的 nav 结构，并从3个容器 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 属性，而左侧和右侧的元素也会采用相同的属性。

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 可以使用比 1 更高的 flex 值，以避免 center 扩展过度。

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

让我们画出链接框：

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

---

演示

- G-Cyrillus

---

关键在于在左右块上设置 flex:2;。谢谢！ - abumalick

Answer 2

我认为做到这一点的方法是将项目分成三个不同的ul元素，然后使用flex属性设置三列的大小。外部列有三个元素，所以它们得到flex:3。中心列只有一个元素，所以它得到flex:1。这样，当您调整大小时，flexbox将为较大的列使用3个flex单位，并为居中的列使用1个flex单位。如果您需要在任何列中使用不同数量的项目，请更改flex单位以反映其中包含的项目数量。

工作示例：jsfiddle

- paulcpederson

---

导航菜单不需要使用ul标签来构建，但这是一种方法，无论你使用什么标签名称 :) ，我将其缩短以与你进行比较。 - G-Cyrillus

我知道在导航中不需要使用 ul。他并没有要求对其语义进行评论。 - paulcpederson

抱歉，我不是有意的。 - G-Cyrillus