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

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

Flexbox 提供了一种在容器内对齐元素的强大方法。然而，当尝试将一个元素向左对齐，另一个元素向中心对齐而不采用绝对定位时，会出现一个常见的挑战。

问题

使用边距时 - right：自动对齐左侧元素，它会无意中将中心元素推到右侧。这是因为 auto 值在应用它的元素之间平均分配剩余空间。

没有绝对定位的解决方案

要在没有绝对定位的情况下规避此问题，将第三个空元素添加到容器中：

<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;
}</code>

工作原理

flex 属性决定了可用空间如何在生长的元素之间分配。在这种情况下，左侧和右侧都设置为增长，并将均匀分布它们之间的空间。由于只有两个生长元素，中心元素将始终完美居中。

这种方法的好处

这种方法在几个方面优于公认的答案:

• 不需要将左边的内容复制到右边并隐藏来实现两边等宽。
• 它依靠flexbox的固有属性来达到想要的效果对齐，使其成为更优雅的解决方案。

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