如何将通知中的Chess图片右对齐？Frontend Mentor项目问题

在完成Frontend Mentor的通知页面挑战时，我遇到了一个问题：无法将Kimberly Smith通知条目里的"Chess"图片右对齐到通知项的最右侧。

相关代码 #

HTML代码

<div class="notification">
  <div class="notification__container">
    <img src="assets\images\avatar-kimberly-smith.webp" class="image" />
    <div class="notification-formatting">
      <div class="align-right">
        <div><strong>Kimberly Smith</strong> commented on your picture
          <br /><time>1 week ago</time>
        </div>
        <div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
      </div>
    </div>
  </div>
</div>

CSS代码

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
.notification {
  background-color: #f6fafd;
  display: flex;
  align-items: center;
}
.notification__container {
  display: flex;
  align-items: center;
}
.image {
  display: flex;
  align-items: center;
  width: 50px;
  margin-right: 5px;
}
.notification_image--main-message-content {
  display: flex;
}
.align-right {
  display: flex;
}

效果说明 #

• 当前效果：Chess图片和文字内容挤在一起，未实现靠右对齐
• 预期效果：Chess图片位于通知条目的最右侧，与左侧文字内容分隔开

已尝试的方案 #

• 给图片设置 display: block; margin-left: auto;
• 给图片设置 float: right;
• 给容器设置 text-align: right;
• 给容器设置 display: flex; justify-content: right;

解决方案 #

问题核心是.align-right容器未占据通知项的剩余宽度，导致无法有效布局对齐。修改CSS如下：

.notification-formatting {
  /* 让容器占据头像右侧的全部剩余宽度 */
  flex: 1;
}
.align-right {
  display: flex;
  /* 让文字靠左、图片靠右，两端分布 */
  justify-content: space-between;
  align-items: center;
}

修改后，.notification-formatting会填满头像右侧的所有空间，.align-right作为flex容器，通过justify-content: space-between实现文字内容靠左、Chess图片靠右的预期效果。

内容的提问来源于stack exchange，提问作者vishalscodes