Flexbox:居中的元素,两侧各有一个空格元素

Question

我正在使用flexbox设置一个由七个<li>不同宽度的元素组成的菜单.我希望我的中间(源顺序中的第4个)<li>元素始终水平居中作为一种锚点,其中1-3个<li>元素占据居中左侧的空间,<li>而第5个元素占据空间的空间对.

我试过space-around,space-between在父Flex容器以及我试图居中align-self: center的<li>元素上,但到目前为止没有运气.任何知识渊博的人的帮助将不胜感激.

的jsfiddle

Answer 1

您需要修改您的nav结构并从左侧,中间和右侧的 3个容器开始.DEMO

HTML

左和右 将举行几个环节,中心是一个链接.

<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