居中排列弹性盒子的中间项并使其他项对齐

Question

对于奇数个弹性项，我希望中间的项处于完美的中心位置，其他项只是围绕它流动。中间的项目具有固定的宽度，其余所有项目都是流体的，并且必须粘着中间的项目，因此填充是固定的。

/* 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是否真的可行？如果不行，请提供其他解决方案。

- Andrey

---

尝试使用justify-content的space-between或space-around选项。https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - vaso123

把中间项放在完美的中心并没有帮助。 - artemean

这不是重复的问题。我的问题完全不同。有人懒得阅读两个问题... - artemean

我已经阅读了其他的问题，那个问题完全相同。 - vaso123

链接的重复答案是不正确的，这里是 OP 问题的解决方案：https://dev59.com/G1wY5IYBdhLWcg3wpJL_#34406525 - blade

Answer 1

一种解决方案是在中间元素上使用“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>

- Nenad Vracar

Answer 2

如果middle-item在中间（右侧和左侧的项目数量相同），最简单的方法是：

.flex-holder {
  display: flex;
  justify-content: center;
  list-style: none;
  padding:0;
}
.flex-holder li {
  flex: 1;
  border: 1px solid red;
}
li.middle-item {
  flex: 0 0 100px;
  background-color: #ccc;
}

<ul class="flex-holder">
  <li>Item 1</li>
  <li>Some text</li>
  <li class="middle-item">Middle</li>
  <li>Very long text item bla bla bla bla bla bla.</li>
  <li>Test</li>
</ul>

---

你也可以强制将嵌套元素居中。例如：

body {
    background: url(http://placehold.it/1x200) no-repeat center;
  }
  
  .flex-holder {
    display: flex;
    list-style: none;
    padding: 0;
  }
  
  .flex-holder li {
    display: flex;
    flex: 1;
    border: 1px solid red;
    justify-content: flex-end;
    padding: 0 1em;
  }
  
  .flex-holder li div {
    border: 1px solid green;
    padding: 0 1em;
  }
  
  li.middle-item {
    flex: 0 0 auto;
    background-color: #ccc;
    text-align: center;
    justify-content: center;
  }
  
  li.middle-item ~ li {
    justify-content: flex-start;
  }

<ul class="flex-holder">
  <li>
    <div>Item 1 </div>
    <div> Some item</div>
  </li>
  <li class="middle-item">Middle</li>
  <li>
    <div>
      Very long text item </div>
  </li>
</ul>

- user4994625

---

所有项目之间的距离必须相同。请查看我的图片。 - artemean

如果你说在文本之间有空格是不可能的，至少我不知道如何做到。 - user4994625

我编辑了我的第二个片段，我认为它非常接近你想要的，但是当空间不足时可能无法很好地工作。 - user4994625