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