React使用map函数时如何实现每3个元素垂直分组排列？

问题根源 #

你的代码里每个FarmBox都被包裹在独立的Container中，导致每个元素都是单独的块级容器，自然会垂直排列；同时Container设置了flex-direction却没启用display: flex，flex属性完全没生效，FarmBox的flex-wrap也因为没有父级flex容器而毫无作用。

修改方案 #

核心思路是用单个flex父容器包裹所有元素，通过flex布局实现自动换行，具体调整如下：

import styled from 'styled-components';

// 父容器：负责整体的换行布局
const Container = styled.div`
  background: lightblue;
  width: 100%;
  display: flex; /* 启用flex布局 */
  flex-wrap: wrap; /* 元素超出容器宽度时自动换行 */
  gap: 10px; /* 可选：添加元素间的间距，优化视觉效果 */
  padding: 10px;
`;

// 单个元素：设置宽度适配每行3个的布局
const FarmBox = styled.div`
  background-color: lavender;
  width: calc(33.33% - 7px); /* 减去gap的影响，确保3个元素刚好占满一行 */
  height: 13%;
  padding: 10px;
  box-sizing: border-box; /* 确保padding不会撑开元素宽度 */
`;

const About = () => {
  // 模拟你的farm数组
  const farm = new Array(10).fill({});

  return (
    <Container>
      {farm.map((v, i) => (
        <FarmBox key={i}>hamburger</FarmBox>
      ))}
    </Container>
  );
};

export default About;

关键修改点说明 #

1. Container容器：

   • 替换display: inline-block为display: flex，启用flex布局
   • 添加flex-wrap: wrap，让子元素在超出容器宽度时自动换行
   • 可选的gap属性用来设置元素间的间距，避免手动计算margin

2. FarmBox元素：

   • 宽度设置为calc(33.33% - 7px)，其中7px是为了抵消gap的影响（每个元素左右各分摊一半间距），保证3个元素能刚好占满一行
   • 添加box-sizing: border-box，确保padding不会额外撑开元素宽度

3. 渲染逻辑：

   • 移除了map循环中每个元素外层的独立Container，所有FarmBox直接放在同一个父Container下，让flex布局的换行规则生效

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