居中的flexbox项目并证明其余部分

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吗？如果不是,请提出另一种解决方案.

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中间 li 的左侧和右侧包裹在uls 中并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>