使用flex布局实现父容器右子元素右对齐、左子元素占剩余宽度

你可以使用以下CSS代码实现需求：

/* 父容器开启flex布局 */
.FindInStoreLocation__store {
  display: flex;
  align-items: center;
  /* 确保父容器占满可用宽度，可根据实际布局调整 */
  width: 100%;
  /* 可选：设置左右块间距，避免内容紧贴 */
  gap: 12px;
}

/* 左侧店铺名称容器 */
.FindInStoreLocation__store__name {
  /* 占据所有剩余可用宽度 */
  flex: 1;
  /* 可选：如果名称过长需要单行截断加省略号，可添加以下三行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右侧距离容器 */
.FindInStoreLocation__store__distance {
  /* 禁止挤压，保证宽度始终匹配内容长度 */
  flex-shrink: 0;
  /* 文本右对齐 */
  text-align: right;
}

实现逻辑：

• 父容器开启flex布局后，默认子元素会在同一行排列
• 给左侧子元素设置flex: 1，该属性等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，会让当前元素自动占满flex容器里的剩余可用空间
• 右侧子元素设置flex-shrink: 0可以避免容器宽度不足时右侧内容被挤压，搭配text-align: right即可实现文本始终靠右对齐。

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