html – 居中中间的flexbox项目并证明其余的

发布时间：2020-12-14 23:29:03 所属栏目：资源来源：网络整理

导读：参见英文答案 Keep one element centered between two elements of different widths in flexbox1个对于奇数个弹性项目,我希望中间的一个在完美的中心,其他项目只是在它周围流动.中间项目具有固定宽度,所有其余部分都是流动的并且必须粘在中间项目上,因此衬

参见英文答案 > Keep one element centered between two elements of different widths in flexbox1个
对于奇数个弹性项目,我希望中间的一个在完美的中心,其他项目只是在它周围流动.中间项目具有固定宽度,所有其余部分都是流动的并且必须粘在中间项目上,因此衬垫是固定的.

/* 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的左侧和右侧的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!