元素水平相互粘附而不是垂直传播（Nextjs + Tailwind）

Question

我一直在尝试创建一种带有阴影容器的盒装容器。 一个位于顶部，包含输入字段，另一个位于其下方，包含一个图表。

这是代码。

`

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
          <div className="flex justify-center"> {/* Center*/}
            <div className="bg-white w-3/4 h-1/4 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
              <InputForm/>  
            </div>
            <div className="bg-white w-3/4 h-1/4 p-20 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
              <ValueChart/>  
            </div>
          </div>
      </div>

`

我尝试使用网格而不是 flex 并更改数字。 但似乎没有任何效果。

Answer 1

Flexbox 布局默认将孩子排成一排。 您需要指定flex-direction: column 。 您可以使用 tailwind 的flex-col class 来执行此操作。 我还添加了items-center class 以使项目居中（这添加了align-items: center以使项目在轴/方向居中对齐。如果您将它们排成一行，即没有flex-col那么你会像原来那样使用justify-center ）。

CodeSandbox演示： https://codesandbox.io/s/strange-keldysh-dhw54f?file=/pages/index.js

<div className="bg-grey w-screen h-screen m-10 shadow-lg"> {/* Background*/}
  <div className="flex flex-col items-center"> {/* Center*/}
    <div className="bg-white w-3/4 h-1/4 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
      <InputForm/>  
    </div>

    <div className="bg-white w-3/4 h-1/4 p-20 rounded-2xl overflow-hidden mb-50 shadow-lg"> {/* Card*/}
       <ValueChart/>  
    </div>
  </div>
</div>