如何用Flexbox/CSS/Tailwind实现每行固定元素数且不拉伸宽度？

要实现每行固定显示4个元素、不拉伸元素宽度、左对齐且水平边距一致的效果，用CSS Grid（或Tailwind对应类）是最直接的方案，Flexbox也可实现但稍显繁琐。以下是具体实现：

方案一：Tailwind + CSS Grid（推荐） #

Grid天然支持指定每行列数，同时让列宽自适应元素内容，完美匹配需求：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div class="grid grid-cols-4 gap-4 bg-gray-300 p-2">
  <div class="bg-yellow-500 p-10"></div>
  <div class="bg-blue-500 p-10"></div>
  <div class="bg-orange-500 p-10"></div>
  <div class="bg-red-500 p-10"></div>
  <div class="bg-neutral-500 p-10"></div>
  <div class="bg-green-500 p-10"></div>
  <div class="bg-teal-500 p-10"></div>
  <div class="bg-cyan-500 p-10"></div>
  <div class="bg-stone-500 p-10"></div>
  <div class="bg-pink-500 p-10"></div>
</div>

关键类说明： #

• grid：启用Grid布局
• grid-cols-4：强制每行显示4列（即4个元素）
• gap-4：设置元素间的水平/垂直间距（替代margin，避免外边距折叠问题）
• 元素无需设置grow或固定宽度，自动保持自身内容宽度，不会被拉伸

方案二：Flexbox + Tailwind #

若必须使用Flexbox，需通过计算确保每行最多容纳4个元素，同时禁止元素拉伸：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>
<div class="flex flex-wrap bg-gray-300 p-2">
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-yellow-500 p-10"></div>
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-blue-500 p-10"></div>
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-orange-500 p-10"></div>
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-red-500 p-10"></div>
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-neutral-500 p-10"></div>
  <div class="flex-shrink-0 w-[calc(25%-12px)] m-1 bg-green-500 p-10"></div>
</div>

关键类说明： #

• flex-wrap：允许元素换行
• flex-shrink-0：禁止元素收缩，保持自身宽度
• w-[calc(25%-12px)]：计算元素可用宽度（25%是每行4个的基础占比，减去左右margin总和）
• m-1：设置元素外边距，保证水平边距一致

注意：Flexbox方案需手动计算宽度，若元素内容宽度超过计算值，可能导致换行异常，因此更推荐Grid方案。

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