Material-UI ListItem设置alignItems='flex-start'不生效如何解决？

你现在的写法存在两处问题：

• alignItems属性控制的是flex布局交叉轴（默认是垂直方向）的对齐规则，你设置flex-start只能让元素垂直靠上排列，不影响水平方向的排列逻辑。要实现水平左对齐，你需要给ListItem设置justifyContent="flex-start"。
• ListItemText组件默认自带flex: 1 1 auto的样式，会自动占满剩余的可用宽度，你放两个ListItemText就会平分ListItem的水平空间，自然会出现均匀分布的效果。

修改可参考以下两种方案： #

方案1：不需要ListItemText内置样式 #

如果你不需要用到ListItemText的内置排版、边距等特性，直接替换成普通文本元素即可：

<List>
  <ListItem justifyContent="flex-start">
    <span>First Element </span>
    <span> Second Element</span>
  </ListItem>
</List>

方案2：需要保留ListItemText特性 #

如果你必须使用ListItemText的相关特性，覆盖它的默认flex属性即可，可以用sx属性快速修改：

<List>
  <ListItem justifyContent="flex-start">
    <ListItemText primary="First Element " sx={{ flex: "none" }} />
    <ListItemText primary=" Second Element" sx={{ flex: "none" }} />
  </ListItem>
</List>

修改后两个ListItemText就不会自动撑宽，会按照内容宽度排列，同时justifyContent="flex-start"保证所有内容整体靠左对齐，即可达到预期效果。

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