Div垂直对齐实现难题：子Div需顶部起始且均匀分布

需求：让父div中的多个子div从顶部开始垂直排列，且子元素间保持均匀间距。

问题场景 #

1. 未添加flex类时，代码如下：

<div className="flex-col items-center justify-center h-screen w-full">
  <div>
    <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
    <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
  </div>
  <div>
    <h1 className="text-white">OR</h1>
  </div>
  <div>
    <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
  </div>
  <div>
    <form onSubmit={handleLogout}>
      <button className="text-white" type="submit">logout</button>
    </form>
  </div>
</div>

此时flex-col未生效（缺少flex启用Flex布局），子元素以块级元素形式排列，紧贴父容器左上角，无法实现水平居中+顶部起始的效果。

2. 添加flex类后，代码如下：

<div className="flex-col flex items-center justify-center h-screen w-full">
  <div>
    <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
    <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
  </div>
  <div>
    <h1 className="text-white">OR</h1>
  </div>
  <div>
    <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
  </div>
  <div>
    <form onSubmit={handleLogout}>
      <button className="text-white" type="submit">logout</button>
    </form>
  </div>
</div>

此时Flex布局生效，但justify-center会让子元素整体垂直居中，导致内容靠近父容器底部，不符合“从顶部开始”的需求。

解决方案 #

调整Flex布局的对齐属性，核心是将垂直对齐方式改为顶部起始，同时添加均匀间距：

<div className="flex flex-col items-center justify-start h-screen w-full space-y-8">
  <div>
    <input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} />
    <button className="text-white ml-3" type="submit" onClick={handleEnterCode}>JOIN GAME</button>
  </div>
  <div>
    <h1 className="text-white">OR</h1>
  </div>
  <div>
    <button className="text-white" type="submit" onClick={e => setShowForm(true)}>CREATE GAME</button>
  </div>
  <div>
    <form onSubmit={handleLogout}>
      <button className="text-white" type="submit">logout</button>
    </form>
  </div>
</div>

关键类说明：

• flex：启用Flex布局，确保flex-col生效
• flex-col：设置子元素垂直排列
• items-center：让子元素水平居中
• justify-start：让子元素从父容器顶部开始排列
• space-y-8：为所有子元素添加均匀的垂直间距（8对应Tailwind的间距单位，可根据需求改为6、10等）

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