如何仅使用 CSS 将中间框置于大小不等的侧框之间？

保持中间项在不相等的侧面项中居中

简介

在设计涉及不同宽度的并排框的布局时，一个常见的挑战是保持中间框的居中。本文探讨了实现此效果的 CSS 解决方案。

使用 Flexbox 的 CSS 解决方案

要使中间框居中而不管侧框的宽度如何，我们可以利用 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;
}

主要特点

• 纯CSS： 不需要额外的库或 JavaScript。
• 无绝对定位： 元素使用 Flexbox 定位，无需绝对定位。
• 动态对齐：无论边宽如何，中间框保持居中

实现细节

• .container 是一个包裹所有三个 .box 元素的 Flexbox。
• 每个 .box 也是一个 Flexbox，使用 justify-content: center 水平对齐其内部内容。
• flex: 1 导致每个 .box 都会增长以均匀地填充可用空间。
• 内部元素上的边距确保侧框的边缘始终接触其容器的边缘。
• 自动边距扩展或根据需要缩小以保持中间框的居中对齐。

以上是如何仅使用 CSS 将中间框置于大小不等的侧框之间？的详细内容。更多信息请关注PHP中文网其他相关文章！