如何右對齊 Flexbox 容器中的單一項目？

如何使用 Flexbox 將一個項目右對齊

實現精確的項目對齊是網頁設計中的常見挑戰。 Flexbox 提供了強大的解決方案，但在特定配置中對齊項目可能很棘手。本文探討了一個常見場景，其中一個專案需要在其他 Flex 專案中對齊。

問題陳述

考慮一個排列了三個子項目的 Flex 容器並排。期望的結果是前兩項左對齊，第三項右對齊。以下HTML 和CSS 表示初始設定：

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}

解：Margin-Left Auto

Flexbox 為這個問題提供了一個簡單的解決方案：在最後一個子項目上設定margin-left: auto 。來自 Flex 規格：

主軸中自動邊距的一種用途是將 Flex 項目分成不同的「群組」。這可以透過單一操作欄的常見 UI 模式來舉例說明，其中一些操作在左側對齊，其他操作在右側對齊。

將margin-left: auto 應用於最後一個我們範例中的子項會產生所需的對齊方式：

.wrap div:last-child {
  margin-left: auto;
}

已更新範例

使用此修改後的CSS，產生的HTML 和CSS 程式碼片段會產生所需的對齊方式，前兩個項目在Flex容器內左對齊，第三個項目右對齊：

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

以上是如何右對齊 Flexbox 容器中的單一項目？的詳細內容。更多資訊請關注PHP中文網其他相關文章！