如何让动态渲染的Tailwind CSS div与前四个同宽并居中？

问题根源是你给子元素加了flex-grow，当一行里的元素凑不够5个时，这个属性会让元素自动撑满剩余空间，导致后面的div变宽。要让所有div宽度一致且居中，按下面的方式修改：

修改步骤： #

• 给父容器添加justify-center，让每行的元素水平居中排列
• 删除子元素的flex-grow属性，只保留flex-shrink-0和basis-1/5，确保元素不会被拉伸或压缩，宽度始终保持一致

修改后的完整代码：

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-gray-300 p-20">
  <div class="flex flex-wrap gap-6 bg-red-400 justify-center">
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">1</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">2</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">3</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">4</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">5</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">6</div>
    <div class="flex-shrink-0 basis-1/5 bg-white text-center">7</div>
  </div>
</div>

原理说明： #

• justify-center：解决不足一行时元素的居中问题，让每行元素都在容器中间对齐
• 移除flex-grow：阻止元素自动拉伸占用剩余空间，保证每个div的宽度都遵循basis-1/5的设定
• flex-shrink-0：防止元素因为容器空间不足被压缩，确保所有div宽度完全一致

不管动态生成多少个div，这样修改后所有元素宽度都会和前四个保持一致，且不足一行的元素会自动居中显示。

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