flex-direction:row实现图片行居中失效问题（Material UI）

你当前Flex布局不生效的核心原因是Flex属性加错了容器：

• 你给每个单独的.post元素设置了flex-direction: row，但每个.post内部只包裹了1张图片，单个子元素不存在横向排列的场景
• 所有.post本身是默认占满整行的块级元素，没有被统一放在一个开启了Flex布局的父容器下，自然会保持垂直堆叠的状态
• 额外冗余：你给<img>标签本身加了Flex相关属性，图片是替换元素，自身没有需要排列的子元素，这些属性完全不生效

1. 调整DOM结构，把所有post条目统一包裹在公共父容器下：

// Home.js 结构调整
<div className="post-list">
  {posts.map(post => (
    <div className="post" key={post.id}>
      <img className="postimage" src={post.link} alt="帖子图片" />
    </div>
  ))}
</div>

2. 调整CSS样式，把横向排列的Flex属性移到公共父容器上，清理冗余属性：

/* 公共父容器控制整体排列规则 */
.post-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px; /* 按需调整图片之间的间距 */
  flex-wrap: wrap; /* 图片数量过多超出屏幕宽度时自动换行，避免横向溢出 */
}

/* 单个post容器删除原有Flex相关属性即可 */
.post {
  /* 可按需添加自定义内边距等样式 */
}

/* 图片样式清理冗余Flex属性，补充防变形规则 */
.postimage {
  width: 100px;
  height: 100%;
  object-fit: cover; /* 避免图片被拉伸变形 */
}

如果用Material UI，不需要写自定义CSS，直接用内置的Stack布局组件即可快速实现效果：

import Stack from '@mui/material/Stack';

// 组件渲染部分
<Stack 
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={2} // 对应元素间距，数值2等于16px，可按需调整
  flexWrap="wrap"
  sx={{ width: '100%' }}
>
  {posts.map(post => (
    <img
      key={post.id}
      src={post.link}
      alt="帖子图片"
      style={{
        width: 100,
        height: '100%',
        objectFit: 'cover'
      }}
    />
  ))}
</Stack>

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