如何在沒有絕對定位的情況下使用 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>

CSS:

說明：左右元素設定為flex: 1，這使得它們成長以平均分配可用空間。 空的右側元素保證左側元素不會將中心元素推離中心。 這種方法可以創建一致且居中的對齊方式，無需絕對定位或在右側複製左側內容。

以上是如何在沒有絕對定位的情況下使用 Flexbox 將一個元素左對齊和另一個居中對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！