如何在Tailwind CSS中使用flex实现响应式三列布局的列排序与隐藏

云原生阿岚

2026-9-28

Tailwind 三列响应式布局解决方案

核心修改点

外层flex容器默认设为垂直排列（flex-col），仅在2xl及以上屏幕切换为水平排列（2xl:flex-row），自然实现小于2xl时第一列在主内容上方的需求
第一列侧边栏默认宽度设为100%（w-full），仅在2xl及以上屏幕固定为w-96，适配小屏幕宽度规则
第一列的右侧边框仅在2xl及以上屏幕显示（2xl:border-r），小屏幕下可按需添加border-b实现上下模块的分割效果
第三列侧边栏的显示断点从xl调整为2xl，实现xl及以下屏幕自动隐藏的需求

修改后完整代码

<div className="relative z-0 flex flex-col 2xl:flex-row overflow-hidden flex-grow">
  {/* Start first column */}
  <aside className="relative 2xl:order-first 2xl:flex-col flex-shrink-0 w-full 2xl:w-96 2xl:border-r border-gray-200 overflow-y-auto">
    <div className="absolute inset-0 py-6 px-1">           
    </div>
  </aside>
  {/* End first column */}
  {/* Start main area*/}
  <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
    <div className="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
    </div>
  </main>
  {/* End main area */}
  {/* Start third column */}
  <aside className="hidden 2xl:order-last 2xl:flex 2xl:flex-col flex-shrink-0 border-r border-gray-200 w-96">
    <div className="inset-0 py-6 px-1"></div>
  </aside>
  {/* end last column */}
</div>