如何在Material-UI Grid的4列空间内均匀分布3项内容？

嘿，这事儿不难，用Material-UI的Grid组件嵌套一下就能完美匹配你的布局要求！我给你写个完整的实现示例：

import React from 'react';
import ListItem from '@mui/material/ListItem';
import Grid from '@mui/material/Grid';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

const CustomListItem = () => {
  return (
    <ListItem>
      {/* 绿线标记的5列总容器 */}
      <Grid container xs={5} alignItems="center">
        {/* 第一列：红色图标 */}
        <Grid item xs={1}>
          <AccountCircleIcon style={{ color: 'red' }} />
        </Grid>

        {/* 剩余4列：用来均匀分布三个内容项 */}
        <Grid item xs={4} container spacing={2} alignItems="center">
          {/* Name项 */}
          <Grid item flex={1}>
            <span>Name: John Doe</span>
          </Grid>
          {/* DOB项 */}
          <Grid item flex={1}>
            <span>DOB: 01/01/1990</span>
          </Grid>
          {/* ID项 */}
          <Grid item flex={1}>
            <span>ID: 123456</span>
          </Grid>
        </Grid>
      </Grid>
    </ListItem>
  );
};

export default CustomListItem;

关键细节解释： #

• 外层Grid container xs={5}：对应你说的绿线标记的12列布局中的5列空间，作为整个内容块的容器。
• 图标列Grid item xs={1}：占据5列中的1列，放置红色图标，这里用了AccountCircleIcon，你可以替换成自己需要的图标。
• 内容子容器Grid item xs={4} container spacing={2}：占据剩下的4列空间，spacing={2}就是你提到的黄线间隔，用来控制三个内容项之间的距离。
• 每个内容项Grid item flex={1}：通过flex: 1让三个项自动均匀填充4列的剩余空间，实现横向均匀分布的效果。

如果需要调整间隔大小，只需要修改spacing的值（比如spacing={3}），或者给内容项自定义margin样式就行。

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