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

使用 Flexbox 左对齐和居中对齐：无需绝对定位的解决方案

使用 Flexbox 对齐子元素时，对齐可能会很困难一个元素向左对齐，另一个元素居中，而不使用绝对定位。这是使用额外空元素的解决方案：

HTML:

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

CSS:

<code class="css">.parent {
  display: flex;
}

.left,
.right {
  flex: 1;
}

/* Styles for demonstration */
.parent {
  padding: 5px;
  border: 2px solid #000;
}

.left,
.right {
  padding: 3px;
  border: 2px solid red;
}

.center {
  margin: 0 3px;
  padding: 3px;
  border: 2px solid blue;
}</code>

说明：

1. 左右元素设置为 flex: 1，这使得它们增长以平均分配可用空间。
2. 空的右侧元素保证左侧元素不会将中心元素推离中心。

这种方法可以创建一致且居中的对齐方式，无需绝对定位或在右侧复制左侧内容。

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