2025-04-04- margin-left- auto

發表於 閱讀次數：
2025-04-04- margin-left- auto

2025-04-04- margin-left- auto

.banner-action {
margin-left: auto;
}
這是向右靠齊嗎？

對 👌，你看得很準！

這段 CSS：

1
2
3
.banner-action {
  margin-left: auto;
}

意思就是：

  • display: flex 的情況下（父層 .my-banner 已經用 display: flex; justify-content: space-between;）
  • 當某個子元素（這裡是 .banner-action）設定 margin-left: auto，它會把「自己左邊的空間」撐到最大。
  • 結果就是：這個元素會 被推到最右邊。

舉個例子：

1
2
3
4
<div style="display: flex; background: #eee;">
  <div>左邊</div>
  <div style="margin-left:auto;">右邊</div>
</div>

效果：

1
[左邊                                  右邊]

左邊的東西保持原位，右邊的東西會緊貼右側。

👉 所以在 MyBanner.vue 裡，.banner-action 就是靠這個技巧，把「action slot 的內容」推到最右邊。