如何在沒有絕對定位的情況下使用 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中文網其他相關文章！