如何在Tailwind中为中等及更小设备实现Flex元素两列布局？

先纠正你代码里的两个核心问题：

1. 子元素结构错误：所有Item被放在同一个flex子容器中，正确做法是每个Item单独作为flex的子项。
2. Tailwind类名语法错误：sm:basis:1/2 需改为 sm:basis-1/2（用连字符替代冒号）。

正确实现代码 #

<div class="flex flex-wrap justify-center gap-4">
  <!-- 每个Item单独作为flex子项 -->
  <div class="basis-1/2 lg:basis-1/4 xl:basis-1/5 mb-8 relative">
    <p>Item1</p>
  </div>
  <div class="basis-1/2 lg:basis-1/4 xl:basis-1/5 mb-8 relative">
    <p>Item2</p>
  </div>
  <div class="basis-1/2 lg:basis-1/4 xl:basis-1/5 mb-8 relative">
    <p>Item3</p>
  </div>
</div>

关键说明 #

• basis-1/2：默认（手机端）每个子项占容器宽度的1/2，直接实现两列布局。
• lg:basis-1/4 xl:basis-1/5：在大屏设备上调整子项宽度，Tailwind断点向上兼容，小屏的类会被大屏类覆盖，无需重复写sm/md的basis规则。
• flex-wrap：让子项在空间不足时自动换行，3个元素时前两个占满一行，第三个自动切换到下一行。
• gap-4：用于控制子项之间的间距，比单独用mb-8布局更整洁，若需要垂直间距可搭配gap-y-8。

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