MUI React中如何实现Item1左对齐、Item2和Item3右对齐布局

你要实现的「首项左对齐、剩余两项右对齐」的效果参考如下：

问题本质 #

你之前调整justifyContent属性不生效，是因为该属性作用于整个Flex容器的所有子元素，只能设置整体对齐规则，无法单独给单个子元素指定不同的对齐逻辑，自然没法实现分散对齐的效果。

具体实现 #

Stack组件是基于Flex布局封装的，实现这个需求只需要做两处修改：

• 删掉Stack上原本设置的justifyContent='flex-end'属性
• 给包裹「Summary」的第一个Box添加sx={{ flexGrow: 1 }}样式：该属性会让这个Box自动占满横向的剩余可用空间，把后面两个元素挤到容器最右侧，同时不会破坏你配置的垂直分隔线位置。

完整可运行代码如下：

<Stack 
  direction="row" 
  spacing={1} 
  divider={<Divider orientation="vertical" flexItem />}
>
    <Box sx={{ flexGrow: 1 }}>
        <Typography>Summary</Typography>
    </Box>
    <Box>
        <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
            <DirectionsCarIcon /> 
            {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles
        </Typography>
    </Box>
    <Box>
        <Typography sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
            <AccessTimeIcon /> 
            {totalDuration}
        </Typography>
    </Box>
</Stack>

补充说明 #

• 你原本给Typography写的verticalAlign: 'middle'在display: inline-flex场景下不生效，补充alignItems: 'center'和小间距gap: 0.5，可以让图标和文字垂直居中对齐，视觉效果更规整。
• 不要用justifyContent: 'space-between'实现这个效果：该属性会在所有子元素之间均匀分配空白，会把垂直分隔线推到三个元素的中间空隙位置，和你预期的“Miles、Duration两项紧挨、中间插分隔线”的效果不符。

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