如何使用flex-wrap: wrap实现Flexbox元素横向换行排列？

我正在制作一个待办事项列表应用，添加文件夹时它们会垂直排列（点击底部栏按钮，会在Homecomponent中显示文件夹）。添加更多文件夹会持续向下排列，但我希望文件夹能像示例图那样横向排列并自动换行。我已经给所有div加了flex-wrap CSS属性，但问题仍未解决。

相关代码：

const CreateFolder = () => {
  let space = <div>
    <img className="space" alt="" src="/image/folder-icon.png" /> Adrina  
    <img className="dwarrow" alt="" src="/image/dwarrow_icon.png"/> 
  </div>

  const [createFolder, setCreateFolder] = useState([])

  const addItem = (e) => {
    setCreateFolder([...createFolder, space])
  }

  return (
    <div>
      <Bottombar submit={addItem}/>
      <Homecomponent createFolder={createFolder}/>
    </div>
  )
}

export default CreateFolder

问题分析与解决步骤 #

1. 修正state存储逻辑
   不要直接把JSX元素存在state里，这不符合React最佳实践，也会导致后续更新和维护困难。应该存储文件夹的核心数据（比如名称），再在组件中渲染：

const CreateFolder = () => {
  // 存储文件夹数据而非JSX元素
  const [folders, setFolders] = useState([])

  const addItem = (e) => {
    // 可替换为动态输入的文件夹名称，暂时用示例名
    setFolders([...folders, { name: 'Adrina' }])
  }

  return (
    <div>
      <Bottombar submit={addItem}/>
      <Homecomponent folders={folders}/>
    </div>
  )
}

export default CreateFolder

2. 给Homecomponent的容器设置正确的Flex样式
   之前flex-wrap没生效，大概率是包裹文件夹的容器没设置display: flex或宽度受限。在Homecomponent中给容器添加以下样式：

const Homecomponent = ({ folders }) => {
  return (
    // 核心容器：开启flex布局、允许换行、设置间距
    <div style={{ 
      display: 'flex', 
      flexWrap: 'wrap', 
      gap: '16px', 
      padding: '16px',
      width: '100%'
    }}>
      {folders.map((folder, index) => (
        <div 
          key={index} 
          style={{ 
            display: 'flex', 
            alignItems: 'center', 
            padding: '8px 12px',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            backgroundColor: '#fafafa'
          }}
        >
          <img className="space" alt="文件夹图标" src="/image/folder-icon.png" />
          <span style={{ margin: '0 8px' }}>{folder.name}</span>
          <img className="dwarrow" alt="下拉箭头" src="/image/dwarrow_icon.png"/>
        </div>
      ))}
    </div>
  )
}

export default Homecomponent

关键说明 #

• 必须确保包裹所有文件夹的外层容器同时设置display: flex和flexWrap: wrap，否则flex-wrap不会生效。
• 添加gap可以控制文件夹之间的间距，设置容器宽度为100%确保有足够空间横向排列。
• 用数据驱动渲染的方式，后续修改文件夹名称、添加删除功能都会更方便。

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