CSS Flex实现双元素显示留间距、单元素时右侧元素固定靠右

需要实现行内图标布局规则：

• V-icon始终固定在图标区域的左侧位置
• urgent-icon（紧急图标）仅在满足request.urgent为真时展示，展示时必须固定在图标区域的最右侧
  最初采用flex布局的justify-content: space-between控制两个图标间距，但先后尝试float: left/right浮动、flex属性justify-self: end、flex-end等方案均未生效，紧急图标会偏移到左侧，无法满足固定靠右要求，需要确认该效果是否可通过flex实现，以及现有代码的问题。

<div class="d-flex justify-content-between">
    <a class="text-underline flex-wrap w-70" (click)="navigateToDetails($event)">{{request.id}}</a>
    <div class="d-flex justify-content-between w-30">
        <img src="assets/v-icon.svg"
             title="Urgent Request" (click)="navigateToDetails($event)"
             [tooltip]="'Link redirects to Vendor Req.: ' + request.id"
             [options]="{'tooltip-class': 'tooltip-style', 'placement': 'top'}">
        <img *ngIf="request?.urgent" height="22" width="22" src="assets/urgent-icon.svg"
             class="float-right">
    </div>
</div>

• 当前实现效果：
• 预期实现效果：

该效果完全可以通过flex实现，现有代码存在三个核心问题：

1. flex子项的float属性无效：flex布局会直接忽略直接子元素的float、clear属性，因此给紧急图标加float-right完全不会生效。
2. justify-self在flex布局中不生效：justify-self是Grid布局的子项属性，flex布局没有对应的对齐逻辑，设置后不会有任何效果。
3. 图标容器的justify-content: space-between逻辑不符合需求：该属性仅在容器内有多个子项时会把首尾子项贴边，配合无效的float属性时，会导致两个图标挤在一起错位。

修正方案 #

利用flex布局的margin: auto自动吸收剩余空间的特性实现，修改代码如下：

<div class="d-flex justify-content-between">
    <a class="text-underline flex-wrap w-70" (click)="navigateToDetails($event)">{{request.id}}</a>
    <!-- 移除图标容器上无效的justify-content-between -->
    <div class="d-flex w-30">
        <!-- 给V-icon添加margin-right: auto（Bootstrap类为me-auto），将后续所有元素推到容器最右侧 -->
        <img src="assets/v-icon.svg" class="me-auto"
             title="Urgent Request" (click)="navigateToDetails($event)"
             [tooltip]="'Link redirects to Vendor Req.: ' + request.id"
             [options]="{'tooltip-class': 'tooltip-style', 'placement': 'top'}">
        <!-- 移除无效的float-right类 -->
        <img *ngIf="request?.urgent" height="22" width="22" src="assets/urgent-icon.svg">
    </div>
</div>

该写法的逻辑是：flex容器内给某个子项设置margin-right: auto后，该子项右侧的所有剩余空间都会被这个margin吸收，不管后续有没有子项、有多少子项，都会被推到容器的最右侧，完全满足「V-icon始终居左、紧急图标存在时固定居右」的需求，不存在条件判断分支的布局偏移问题。

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