如何用Tailwind CSS实现Flex布局每行最多显示两个子项？

我有如下元素数组：

const items = ['2342', 'Jensen Huang', 'jensen@gmail.com', '$ 200', 'delivered','29 Aug 2022', 'View All of the items']

当前使用以下Tailwind CSS代码渲染（类似flex-auto效果）：

<div class="border flex flex-wrap gap-4 justify-between">
  {items.map((item) => <p>{item}</p>)}
</div>

当前渲染效果如下：

+-----------------------------------------+
|2342     Jensen Huang    jensen@gmail.com|
|$ 200     delivered           29 Aug 2022|
|View All of the items                    |
+-----------------------------------------+

但我希望每行最多显示两个元素，渲染效果如下：

+--------------------------------+
|2342                Jensen Huang|
|jensen@gmail.com           $ 200|     
|delivered            29 Aug 2022|
|View All of the items           |
+--------------------------------+

请问该如何调整实现？

推荐三种实现方式，按需选择：

1. 分组渲染（最贴合目标效果） #

先把数组按每2个元素一组拆分，再给每组套一个flex justify-between的容器，确保每组内两个元素左右对齐：

// 先对数组分组
const groupedItems = [];
for (let i = 0; i < items.length; i += 2) {
  groupedItems.push(items.slice(i, i + 2));
}

渲染代码：

<div class="border flex flex-col gap-4">
  {groupedItems.map((group) => (
    <div class="flex justify-between">
      {group.map((item) => <p>{item}</p>)}
    </div>
  ))}
</div>

这种方式能精准控制每行两个元素的对齐方式，最后一组只有单个元素时会自动左对齐，完全匹配你的目标效果。

2. Grid布局实现 #

利用Tailwind的Grid布局类，直接定义两列，再通过justify-self控制每个元素的对齐方向：

<div class="border grid grid-cols-2 gap-4">
  {items.map((item, index) => (
    <p class={index % 2 === 0 ? "justify-self-start" : "justify-self-end"}>{item}</p>
  ))}
</div>

grid-cols-2强制每行两列，偶数索引元素左对齐、奇数索引元素右对齐，视觉效果和目标一致。

3. Flex宽度控制 #

给每个列表项设置半宽类，结合容器的flex-wrap实现每行两个元素：

<div class="border flex flex-wrap gap-4">
  {items.map((item) => <p class="w-1/2">{item}</p>)}
</div>

如果需要元素左右对齐，可再给容器添加justify-between类，最后单个元素会自动撑满整行。

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