<分区>
对于奇数个 flex 元素，我希望中间的元素位于完美的中心，而其他元素只是围绕它流动。中间项的宽度是固定的，其余的都是流动的，必须粘在中间项上，这样内边距是固定的。
/* 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 真的可行吗？如果否，请提出其他解决方案。
最佳答案
一种解决方案是在中间元素上使用 position: absolute 并使用 transform: translate() 将其居中，但是在小窗口尺寸上会出现元素溢出您可以使用媒体查询进行修复。
.flex-holder {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
padding: 0;
}
.middle-item {
width: 75px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<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>另一种使结果接近预期结果的解决方案是将 li 的左右两侧包裹在 ul 中并设置 flex: 1 在它们上面，这样它们大小相等，并始终将中间 div 设置在中心。
ul, .wrap {
display: flex;
justify-content: space-around;
position: relative;
list-style: none;
flex: 1;
padding: 0;
}
.middle-item {
width: 75px;
background: lightblue;
text-align: center;
}<ul class="flex-holder">
<li class="wrap">
<ul>
<li>Item 1</li>
<li>Some item</li>
</ul>
</li>
<li class="middle-item">Middle</li>
<li class="wrap">
<ul>
<li>Very long text item</li>
<li>Test</li>
</ul>
</li>
</ul>关于html - 将中间的 flexbox 元素居中并对齐其余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39767411/