TailwindCSS justity-between while ignoring child size

Question

How can I position those child divs absolutely regardless of their size? Like middle should be at the middle regardless of its neighbors sizes.

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

https://stackoverflow.com/q/32378953/3597276 – Michael Benjamin Jan 28 '21 at 02:39 — Michael Benjamin, Jan 28 '21 at 02:39

score 1 · Accepted Answer · answered Jan 28 '21 at 04:19

You can use grid if you want consistency among them. Check out 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>

score 0 · Answer 2 · answered Jan 28 '21 at 14:05

You can add flex-1 to your items and also 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>

TailwindCSS justity-between while ignoring child size

2 Answers2