如何在Fluent UI水平对齐的Stack中自定义Stack Item位置

要实现你需要的布局——两个子Stack靠左、带Cancel图标的Stack靠右，同时中间文本区域自适应内容宽度，只需要调整父Stack的布局属性，并给中间文本容器添加弹性增长属性即可：

修改后的代码 #

<Stack 
  styles={stackBodyStyle} 
  horizontal 
  gap="14px"
  verticalAlign="center"
  justifyContent="space-between"
>
  {/* 左侧图标容器 */}
  <Stack verticalAlign="center">
    <FontIcon iconName='Info' style={{marginLeft: "18px"}}></FontIcon>
  </Stack>
  {/* 中间自适应文本容器 */}
  <Stack 
    styles={{root: { flexGrow: 1 }}} 
    verticalAlign="center"
  >
    <Text>{text}</Text>
  </Stack>
  {/* 右侧关闭按钮容器 */}
  <Stack 
    onClick={onClose} 
    styles={{root: { cursor: "pointer" }}} 
    verticalAlign="center"
  >
    <FontIcon iconName='Cancel' style={{marginRight : "18px"}}></FontIcon>
  </Stack>
</Stack>

const stackBodyStyle: IStackStyles = {
    root: {
        borderWidth: "1px",
        borderStyle: "solid",
        minHeight: "48px",
        borderRadius: "3px",
        backgroundColor: "#EFF6FC",
        borderColor: "#C7E0F4",
        padding: "0 8px" // 可选，给容器加内边距避免内容贴边
    }
}

关键修改点说明 #

• 父Stack设置justifyContent="space-between"：直接实现左侧元素靠左、右侧元素靠右的两端对齐效果
• 中间文本Stack添加flexGrow: 1：让这个容器自动填充父Stack的剩余空间，同时内部文本会自适应内容宽度
• 移除冗余属性：去掉了子Stack的调试用边框（如果需要保留可自行加回），以及Cancel Stack上无效的horizontalAlign="end"，因为父容器的布局已经控制了它的位置
• 统一垂直居中：父Stack设置verticalAlign="center"，所有子元素自动垂直居中，无需每个子Stack单独设置（当然保留也不影响）

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