如何用CSS Flexbox和Tailwind实现等宽三列布局？

问题描述 #

我希望通过Flexbox布局实现三列等宽效果，且必须使用Tailwind框架。按照CSS理论，给三列设置相同的flex-basis并允许自由增长，应该能让它们按相同比例扩展，但实际其中一列因内容较多宽度更大，不知原因。（仅添加边框用于视觉区分，非必需）

原代码 #

CSS

.just-a-border {
  border: 2px dotted purple;
}

HTML

<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="grow flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center basis-1 grow">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>

问题原因 #

核心问题是flex项目的默认最小宽度规则：flex元素默认带有min-width: auto，这会强制元素宽度至少能容纳内部内容，不会收缩到比内容还窄。你设置的basis-1对应flex-basis: 0.25rem，但这个值会被内容撑开的最小宽度覆盖，导致内容多的列基础宽度远大于其他列。即便设置了grow:1，剩余空间是在不同的基础宽度上分配，最终还是无法实现等宽。

解决方案 #

给每个列元素添加flex-1和min-w-0两个Tailwind类：

• flex-1等价于flex: 1 1 0%，强制将所有列的flex-basis设为0%，让它们的基础宽度完全一致，同时允许元素根据可用空间增长或收缩。
• min-w-0覆盖默认的min-width: auto，允许元素收缩到小于内容宽度（内容会自动换行，配合text-center不会影响排版效果）。

修改后的代码 #

<link href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<div class="flex flex-nowrap items-center gap-5 justify-center py-12 flex-row">
  <div class="just-a-border h-full p-6 text-center flex-1 min-w-0">
    <div class="mb-2 text-sm font-medium uppercase">I want to have more words</div>
    <div class="font-medium">6 hours</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 min-w-0">
    <div class="mb-2 text-sm font-medium uppercase">Yes</div>
    <div class="font-medium">1 hour</div>
  </div>
  <div class="just-a-border h-full p-6 text-center flex-1 min-w-0">
    <div class="mb-2 text-sm font-medium uppercase">No</div>
    <div class="font-medium">3 hours</div>
  </div>
</div>

另外，父容器的grow类可以移除，因为块级元素默认会占满可用宽度，无需额外设置grow。

内容的提问来源于stack exchange，提问作者Álvaro Franz