Tailwind CSS justify-between 同时忽略子大小

Posted 2023-03-07

【中文标题】Tailwind CSS justify-between 同时忽略子大小

【英文标题】：TailwindCSS justity-between while ignoring child size

【发布时间】：2021-05-01 22:20:37

【问题描述】：

无论大小如何，我如何才能绝对定位这些子 div？无论邻居大小如何，like middle 都应该在中间。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row justify-between">
  <div>fsdf</div>
  <div>middle</div>
  <div>fsdfsdfsfsfsfsfsdfsfsdffsdfsfsfsdfsdfsdfsfsfsdfsdfdfsdfsfdsfs</div>
</div>

【问题讨论】：

***.com/q/32378953/3597276

【参考方案1】：

您可以将flex-1 添加到您的项目中，也可以添加break-all

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row justify-between">
  <div class="flex-1 break-all">fsdf</div>
  <div class="flex-1 break-all">middle</div>
  <div class="flex-1 break-all">fsdfsdfsfsfsfsfsdfsfsdffsdfsfsfsdfsdfsdfsfsfsdfsdfdfsdfsfdsfs</div>
</div>

【参考方案2】：

如果你想要它们之间的一致性，你可以使用grid。查看Grid with equal width

<div class="grid grid-cols-3 break-words">
  <div class="col-span-1">fsdf</div>
  <div class="col-span-1">middle</div>
  <div class="col-span-1">fsdfsdfsfsfsfsfsdfsfsdffsdfsfsfsdfsdfsdfsfsfsdfsdfdfsdfsfdsfs</div>
</div>