说我有3个div与flexBox水平显示：
| |-div1-| |-center-div-| |-wider-div-| |
我想让中心的div与父母的中间对齐.我该如何做到这一点？对齐内容将以所有宽度的总和为中心,并将对齐自身：中心应用到中间的div将不起作用,因为对齐属性操纵另一个轴上的定位.
有没有一个敏捷的CSS解决方案,还是应该诉诸于jQuery？
ul {
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
}
li {
background-color: red;
border: 5px solid blue;
list-style: none;
}
<ul>
<li><a href = "#">short</a></li>
<li><a href = "#">want center</a></li>
<li><a href = "#">loooooooooooooooooong</a></li>
</ul>
这个问题的例证：
https://jsfiddle.net/7w8mp8Lj/2/
解决方法
您可以设置第一个和最后一个li来生成flex：1,并将其设置为内联块和文本对齐1/2/3 li作为右/中/左.
ul {
display: flex;
justify-content: center;
width: 100%;
background-color: purple;
list-style: none;
padding: 0;
}
li:nth-child(1) {
text-align: right;
flex: 1;
}
li:nth-child(2) {
text-align: center;
}
li:nth-child(3) {
text-align: left;
flex: 1;
}
li a {
display: inline-block;
background-color: red;
border: 5px solid blue;
}
<ul>
<li><a href="#">short</a></li>
<li><a href="#">want center</a></li>
<li><a href="#">loooooooooooooooooong</a></li>
</ul>
