Tailwind CSS布局问题：如何将标题放在表格上方、按钮放在表格下方

问题原因 #

布局错乱的核心原因有两个：

• 最外层容器使用了flex flex-row属性，导致「Sms Template标题、表格卡片、提交按钮」三个子元素强制水平排列
• 表格卡片外层多了min-h-screen属性，强制占用全屏高度，挤压了其他元素的布局空间

修改方法 #

按以下步骤调整代码即可实现「标题在表格上方、按钮在表格下方」的预期效果：

1. 将最外层容器的flex flex-row items-center justify-center修改为flex flex-col items-center justify-center min-h-screen，把全局排列改为纵向堆叠，同时把全屏高度配置移到最外层
2. 删除表格卡片外层冗余的min-h-screen flex items-center justify-center属性
3. 将提交按钮代码挪到firstbox容器内部，放在表格所在的div之后

完整可运行代码 #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col items-center justify-center min-h-screen">
  <p class="font-bold w-full text-left mb-4" style="max-width: 600px;">Sms Template:</p>
  <div>
    <div class="firstbox border border-black w-[600px]">
      <div class="mx-11 my-10 px-10">
        <p class="py-2 text-lg font-semibold">Message For:</p>
        <select class="firstbox_select text-center w-full py-2 border" name="message" id="message">
          <option selected disabled>Invoice</option>
        </select>
      </div>
      <div class="mx-11 my-10 px-10">
        <p class="py-4 text-lg font-semibold">Available parameters</p>
        <table class="table w-full text-center">
          <tbody>
            <tr>
              <td class="border border-black tb px-4">Client Full name</td>
              <td class="border border-black tb px-4">[fullname]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice ID</td>
              <td class="border border-black tb px-4">[invoice_id]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice Date</td>
              <td class="border border-black tb px-4">[invoice_date]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="mx-11 mb-10 px-10">
        <input type="submit" value="Log In" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-gray-700 shadow-lg focus:bg-gray-600">
      </div>
    </div>
  </div>
</div>

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