如何将 Flexbox 布局中的中间项与尺寸不均匀的侧面项居中？

在不同的侧项宽度中居中居中

在 Flexbox 布局中，当侧项具有不同的宽度。为了解决这个问题，我们可以利用具有自动边距的嵌套弹性容器。

这种方法背后的关键概念是：

• 使用嵌套弹性容器可确保项目在内部和之间分布根据需要调整框。
• 对左侧和右侧框中的内部容器应用自动边距会自动调整位置以居中item.

以下是演示此技术的代码：

.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;
}

/* non-essential */
.box {
  align-items: center;
  height: 40px;
}

.inner {
  background: pink;
  border: 1px solid deeppink;
  padding: 0 5px;
}

p {
  text-align: center;
  margin: 5px 0 0 0;
}

在此代码中，容器被设置为弹性盒，并且盒子是弹性项目，其弹性比率为1. 每个盒子都使用嵌套的弹性盒子来居中其内容。

关键步骤是在第一个和最后一个内部容器中设置自动边距盒子。对于左侧，margin-right: auto;自动调整元素右侧的空间，而margin-left: auto;在左侧做同样的事情。这可以确保居中框保持居中，无论侧框的宽度如何。

通过使用这种方法，即使侧项具有不同的宽度，您也可以实现中间项的真正居中。

以上是如何将 Flexbox 布局中的中间项与尺寸不均匀的侧面项居中？的详细内容。更多信息请关注PHP中文网其他相关文章！