如何在没有绝对定位的情况下将 Flexbox 中的元素左对齐和居中对齐？

使用 Flexbox 将元素左对齐和居中

问题：

对齐子元素在 Flexbox 容器内，一个元素居中，另一个元素向左对齐。

代码：

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

问题：

使用 margin-right：自动将居中元素推离中心。

没有绝对定位的解决方案：

添加第三个空元素：

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div>

应用以下样式：

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

说明：

左右都设置为增长（flex：1），均匀分布可用空间。由于右侧的空元素与左侧的宽度相同，因此中心元素保持完美居中。

此解决方案的好处：

• 无需复制内容元素之间。
• 元素完美居中，无论内容宽度如何。

以上是如何在没有绝对定位的情况下将 Flexbox 中的元素左对齐和居中对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！