Tailwind CSS justify-between 同时忽略子尺寸

Question

我怎样才能完全定位那些子 div 而不管它们的大小？像中间应该在中间，不管它的邻居大小。

<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>

Answer 1

如果你想要它们之间的一致性，你可以使用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>

Answer 2

您可以将 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>

Tailwind CSS justify-between 同时忽略子尺寸

TailwindCSS justity-between while ignoring child size

html

flexbox

tailwind-css