如何实现Angular Material自动完成组件中mat-option的两个span左右对齐

需求：使用Angular Material的autocomplete组件时，下拉选项（mat-option）内的两个<span>需要分别左对齐和右对齐，避免绝对定位带来的响应式适配问题。

修改后的HTML代码 #

<mat-form-field class="example-full-width">
  <input #stateInput (keyup)="0" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option 
      class="option-container"
      (onSelectionChange)="stateInput.value !=undefined && onEnter($event)" 
      *ngFor="let state of filteredStates | async" 
      [value]="state.name"
    >
      <div class="left-content">
        <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
        <span>{{ state.name }}</span>
      </div>
      <span class="right-content">Population: {{state.population}}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

对应的CSS样式 #

.option-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px; /* 匹配mat-option默认内边距，避免布局偏移 */
}

.left-content {
  display: flex;
  align-items: center;
  gap: 8px; /* 调整图片与名称之间的间距 */
}

.right-content {
  text-align: right;
  white-space: nowrap; /* 防止人口信息换行 */
}

方案说明 #

• 使用Flex布局替代绝对定位，天然支持响应式适配，不会出现元素错位或溢出问题
• justify-content: space-between 自动将左右两部分内容分别推向容器两端
• 拆分左右内容容器，让图片和名称保持在同一行左侧，人口信息固定在右侧
• 通过white-space: nowrap确保右侧内容不会因容器变窄而换行

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