允许组件溢出到下一行

Question

我正在尝试获取一个组件的映射以转到下一行（见黄色箭头）。但是，现在它并没有向下移动，而是在挤压组件（卡片）。我制作了 bg-colors 来提供帮助。任何指导都会很棒！


<div className="border-2 h-screen bg-pink-300 ">
            <div className="flex justify-end px-10 ">
                <button className="border-2 border-secondary p-2 rounded-lg hover:border-opacity-20">Add Item +</button>
            </div>
           
            <div className="flex overflow-x-auto bg-green-500 ">
            {data.map((data) => (
                <MenuCard title={data.title} ingredients={data. ingredients} 
                category={data.category} onSpecial={data.onSpecial} />
            ))}
            </div>
            
            </div>

Answer 1

将 flex-wrap class 添加到 MenuCard 的父 div 元素中。同时删除 overflow-x-auto class 因为这将使容器垂直滚动。

应该是这样的。

<div className="flex flex-wrap bg-green-500 ">
  {data.map((data) => (
    <MenuCard title={data.title} ingredients={data. ingredients} 
    category={data.category} onSpecial={data.onSpecial} />
  ))}
</div>

如果它试图缩小，您可能还需要在每个 MenuCard 实例中添加 flex-shrink-0 class。

允许组件溢出到下一行

Allow Component to Overflow to next line

css

reactjs

next.js

tailwind-css