如何将中间元素置于动态大小的同级元素之间？

使用动态同级宽度将中间元素居中

想象一个布局，由三个水平对齐的框组成，点代表它们之间的间距：

[Left box]......[Center box]......[Right box]

当其中一个侧框被移除时，中心框应保留居中：

[Left box]......[Center box].................

同样，当另一个侧框被移除时：

................[Center box].................

此外，中心框内容应扩展以填充可用空间，而侧框保持固定在尺寸。溢出将使用溢出：隐藏和文本溢出：省略号来处理以剪辑内容。

[Left box][Center boxxxxxxxxxxxxx][Right box]

虽然 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; }

此策略使用自动边距自动居中中间项目，无论侧框的宽度如何。调整内容：居中；对齐确保中间框中的内容保持居中。

通过嵌套弹性容器，我们限制了各个框的边距，防止它们影响其他元素的布局。即使侧框的宽度差异很大，此方法也能实现真正的居中。

以上是如何将中间元素置于动态大小的同级元素之间？的详细内容。更多信息请关注PHP中文网其他相关文章！