如何为元素自身应用Tailwind CSS的basis-n（flex-basis）属性？

问题根源 #

你的父容器使用了flex flex-col，此时flex布局的主轴为垂直方向，因此basis-72（对应flex-basis: 18rem）会作用在元素的垂直高度上，而非你期望的水平宽度——这就是样式效果不符合预期的核心原因。

解决方案 #

要固定城市名称的宽度，直接给包含城市名的div设置宽度类即可，无需依赖flex basis。以下是两种可行的修改方式：

方法1：使用Tailwind预设宽度类（推荐） #

将城市名div的flex-shrink-0 flex-grow-0 basis-72替换为w-72 flex-shrink-0（w-72是Tailwind预设的18rem/288px宽度），确保宽度固定且不会被压缩：

<div class="flex flex-row">
  <div class="flex flex-col">
    <div class="w-72 flex-shrink-0">San Diego</div>
    <div class="text-center">15:00</div>
    <div class="text-center">16:00</div>
    <div class="text-center">13:00</div>
    <div class="text-center">14:00</div>
  </div>
  <div class="flex flex-col">
    <div class="w-72 flex-shrink-0">Paris</div>
    <div class="text-center">00:00</div>
    <div class="text-center">01:00</div>
    <div class="text-center">22:00</div>
    <div class="text-center">23:00</div>
  </div>
  <div class="flex flex-col">
    <div class="w-72 flex-shrink-0">Boston</div>
    <div class="text-center">18:00</div>
    <div class="text-center">19:00</div>
    <div class="text-center">16:00</div>
    <div class="text-center">17:00</div>
  </div>
</div>

方法2：自定义固定宽度 #

如果需要更灵活的宽度值，也可以用min-w-[288px]直接指定像素宽度，搭配flex-shrink-0防止元素被压缩：

<div class="min-w-[288px] flex-shrink-0">San Diego</div>

补充说明 #

flex: 0 0 18rem的作用维度完全由父容器的flex-direction决定：

• 当父容器为flex-row时，主轴是水平方向，basis控制元素宽度；
• 当父容器为flex-col时，主轴是垂直方向，basis控制元素高度。

你之前的误解在于忽略了flex方向对basis作用维度的影响。

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