Flexbox:居中元素，两边都有空格环绕元素
Flexbox:居中元素，两边都有空格环绕元素
提问于 2014-04-10 05:37:23
我正在使用flexbox设置一个由7个不同宽度的<li>元素组成的菜单。我希望我的中间(源码顺序中的第4个) <li>元素始终水平居中，作为一种锚点，1-3个<li>元素占据居中<li>左侧的空间，5-7个元素占据右侧的空间。
我已经在父flex容器上尝试了space-around，space-between，以及我试图居中的<li>元素上的align-self: center，但到目前为止还没有成功。如果有人对flexbox有所了解，我们将不胜感激。
jsfiddle
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-10 06:56:30
您需要修改您的nav结构，并从左、中、右3个容器开始。
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
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可以取flex值比更高的1，以避免中心扩展过多。
nav > span {
flex:2; /* 2 is minimum but plenty enough here */
}让我们画出我们的链接框：
a {
padding:0 0.25em;
border:solid;
}Stack Overflow用户
发布于 2014-04-10 07:11:40
我认为这样做的方法是将这些项拆分为三个不同的ul元素，然后使用flex属性来设置这三个列的大小。
外面的列中有三个元素，所以它们的值是flex:3。居中的列只有一个元素，所以它的值是flex:1。这样，当您调整大小时，flexbox将对较大的列使用3个弹性单位，对居中的列使用1个弹性单位。如果您需要在任何列中使用不同数量的项，只需更改flex单位以反映其中有多少项。
工作小提琴：jsfiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22974428
复制相关文章
相似问题
腾讯云开发者
