如何使用TailwindCSS在指定视口下实现嵌套Flexbox换行？

我用TailwindCSS编写了如下布局代码，想要在移动端将「Start action」按钮所在的flex区域单独换行，同时保留图标与标题/副标题的原有布局，但实际操作中发现grow样式会阻碍flex-wrap生效，无法实现预期效果：

<div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div class="ml-50%">icon</div>
    </div>
  </div>
  <div class="grow">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <!-- 希望下方内容在移动端换行至单独一行 -->
  <div class="grow">
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

解决方案 #

通过调整响应式flex属性即可实现需求，修改后的代码如下：

<div class="box-border flex w-auto flex-row flex-wrap gap-2 rounded-2xl border p-4 my-4 mx-4">
  <div class="grow-0">
    <div class="flex h-full flex-col items-center justify-center">
      <div>icon</div>
    </div>
  </div>
  <div class="grow md:flex-1">
    <div class="flex flex-col">
      <div>
        <h2>Title</h2>
        <p>Subtitle - Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
    </div>
  </div>
  <div class="w-full md:w-auto md:grow">
    <div class="flex h-full items-center justify-end">
      <button class="w-32 rounded-full bg-green-100">Start action</button>
    </div>
  </div>
</div>

关键调整说明 #

• 父容器添加flex-wrap，允许子元素在空间不足时换行
• 标题容器：移动端用grow占满图标之外的剩余宽度；桌面端切换为md:flex-1，配合按钮容器的md:grow维持原有的左右分布
• 按钮容器：移动端设置w-full强制占满整行，自动触发换行；桌面端恢复md:w-auto和md:grow，回到原布局位置
• 移除了无效的ml-50%类（Tailwind无该类，如需调整图标间距可使用ml-auto或具体数值类如ml-4）

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