如何使侧边箱不均匀的 Flexbox 容器中的中间项居中？

带有不对称侧框的居中中间项目

目标是当中间项目的相邻项目具有不同宽度时，将中间项目置于容器中居中，无论内容溢出如何，都保持正确的对齐方式。

使用Flexbox

Flexbox提供了使用嵌套容器和自动边距的解决方案：

.container {
  display: flex;
}

.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > div { margin-right: auto; }
.box:last-child  > div { margin-left: auto; }

说明：

• 最外层容器是一个水平拉伸的弹性容器。
• 每个“盒子”元素也是一个弹性容器，其内容居中。
• “margin-right: auto;”第一个框的内部元素将其向右推向容器边缘，有效地将其与左侧对齐。
• “margin-left: auto;”最后一个框的内部元素将其向左拉到容器边缘，使其与右侧对齐。
• 可以添加其他样式（例如高度、填充）以用于演示目的。

示例：

<div class="container">
  <div class="box"><div class="inner">short box</div></div>
  <div class="box"><div class="inner">centered box</div></div>
  <div class="box"><div class="inner">looooooooooooooooooooooong box</div></div>
</div>

<p>→ true center</p>

这种方法对齐中间元素无论侧框的宽度如何，即使内容溢出。

以上是如何使侧边箱不均匀的 Flexbox 容器中的中间项居中？的详细内容。更多信息请关注PHP中文网其他相关文章！