如何垂直对齐我的组件并连续对齐 3 个组件？

Question

在我的 React 项目中，我想将我的组件垂直对齐。但是当我使用 div 并将其设为 flex 时，我的组件宽度正在发生变化并且看起来很糟糕。我应该怎么办？我使用 tailwindcss，但如果你不知道，你也可以告诉 normal css。我也可以使用普通的 css。我的组件：

<div className="">
      <div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
        <div className="flex mt-2">
          <div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2  ">
            <FontAwesomeIcon icon={faEtsy} className="text-2xl  text-red-600" />
          </div>
          <div className="relative">
            <span className="ml-3 pt-2 relative text-xl font-medium">
              {prop.PharmacyName}
            </span>
            <br />
            <span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
          </div>
        </div>
        <Divider />
        <div className="">
          <p className="px-2 py-1 font-medium text-base text-gray-700">
            {prop.PharmacyAdress}
          </p>
        </div>
      </div>
    </div>

我如何调用我的组件：

data.map((x, index) => {
            return (
              <div className="flex align-center">
                <PharmacyCard className="relative" key={index} props={x} />
              </div> )})

它的样子：https://prnt.sc/1covi9m

我想要什么：https://prnt.sc/1cow1sq

我将该组件用于映射 30-40 次。所以我想连续看到 3 个组件。感谢大家的回复！

Answer 1

你只需要将 .flex 放在上层，如下所示：

<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>

希望本文link 能帮助您更好地使用 flexbox https://codepen.io/enxaneta/full/adLPwv

Answer 2

So i want to see like 3 component in a row.

既然你对布局有了清晰的认识，我建议把你的组件包装在另一个 div 中 grid 和三列；像这样：

<div className="grid grid-cols-3">
    {data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>

根据您的设计，您也可以添加间隙 class。

同时考虑从组件中删除 w-3/12 class，以便它们填充网格的宽度。

如何垂直对齐我的组件并连续对齐 3 个组件？

How can i align my components vertically and 3 in a row?

html

css

reactjs

tailwind-css