对于奇数个弹性项,我希望中间的项处于完美的中心位置,其他项只是围绕它流动。中间的项目具有固定的宽度,其余所有项目都是流体的,并且必须粘着中间的项目,因此填充是固定的。
/* CSS */
.flex-holder {
display: flex;
justify-content: center;
}
.middle-item {
width: 75px;
}
<!-- HTML -->
<ul class="flex-holder">
<li>Item 1</li>
<li>Some item</li>
<li class="middle-item">Middle</li>
<li>Very long text item</li>
<li>Test</li>
</ul>
使用flexbox是否真的可行?如果不行,请提供其他解决方案。
justify-content
的space-between
或space-around
选项。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - vaso123