CSS控制时间右对齐的一种方式

<div class="item-content-bg"
                *ngIf="item.area?.firstText?.label || item.area?.secondText?.label || item.rent || item.transferFee || item.location || item.time">
                <p class="item-content">
                    <span *ngIf="item.area?.firstText?.label" class="content area"
                      [ngStyle]="item.area?.firstText?.cssStyle | styleFilter">{{item.area?.firstText?.label}}</span>
                    <span *ngIf="item.area?.secondText?.label" class="content area"
                      [ngStyle]="item.area?.secondText?.cssStyle | styleFilter">{{item.area?.secondText?.label}}</span>
                    <span *ngIf="item.rent" class="content">{{item.rent}}</span>
                    <span *ngIf="item.transferFee" class="content">{{item.transferFee}}</span>
                    <span *ngIf="item.location" class="content">{{item.location}}</span>
                </p>
                <p *ngIf="item.time" class="content-time">{{item.time}}</p>
              </div>

 

item-content设置flex-grow 将时间撑到右边

.item-content {
    font-size: 0.75rem;
    color: rgba(133, 136, 148, 1);
    display: inline-block;
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.content-time {
    font-size: 0.75rem;
    color: rgba(182, 183, 191, 1);
}