在两个不同宽度的柔性项目之间水平居中弯曲项目

Question

假设我有3个水平显示的div flexbox:

 |     |-div1-| |-center-div-| |-wider-div-|     |

我希望中心div与父级的中间对齐.我怎么能做到这一点？justify-content将基于所有宽度的总和居中所有3个div,并且应用于align-self: center中间div不会做任何事情,因为align属性操纵另一个轴上的定位.

是否有响应式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/

Answer 1

您可以设置第一个和最后一个li增长flex: 1,并设置a为内联块和文本对齐1/2/3 li为右/中/左.

的jsfiddle

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>