Space weird behaviour with flex

[jenstornell]

I really like the idea with the space feature.

I'm not sure if it's a bug or if it's just me but the first item behaves unexpectedly. All my a-link classes are the same. I noticed that the space-x and space-y does not run on the first item.

<div class="max-w-screen-sm bg-red-100 mx-auto w-full flex flex-wrap space-x-2 space-y-2">
   <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700">lan</a>
  <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700">corona</a>
  <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700">kostnader</a>
  <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700">budget
blancolan</a>
  <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700">samla-lan</a>
</div>

Update

I've added a fiddle: https://jsfiddle.net/43kLo6bt/1/

[adamwathan]

This is just a known limitation unfortunately, we need gap support in Flexbox to handle this problem properly (or a ton of wrapper elements and weird negative margin tricks).

The space utilities are just a shorthand for "add some left (or top) margin to every item except the first", they are really simple and no fancy magic. They are useful for 95% of situations, so it felt worth adding them even though the 5% cases still need a more complex manual solution.

[jenstornell]

It seems like gap for flex is just around the corner for Chrome (saw this today):

‘gap’ for flexbox supported in Chrome Canary
This is currently behind a flag in Chrome Canary – you’ll need to enable it.

https://css-irl.info/exciting-things-on-the-horizon-for-css-layout/

[jenstornell]

@adamwathan Yes, after some additional testing I see how hard it is to emulate gap for flexbox.

The solution for this problem right now would then be to use Tailwind classes like below, which works just fine.

https://jsfiddle.net/cvLp0z82/1/

<div class="max-w-xs bg-gray-600 overflow-hidden">
  <div class="gap-2 max-w-screen-sm w-full flex flex-wrap -m-1">
     <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700 m-1">hello</a>
    <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700 m-1">world</a>
    <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700 m-1">whatever</a>
    <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700 m-1">whenever</a>
    <a href="#" class="whitespace-no-wrap rounded-full bg-gray-300 px-3 py-1 text-xs uppercase fw-600 text-gray-700 m-1">somewhere</a>
  </div>
</div>