Why primeflex responsive is inverted? #195

[samuel-aka-viana]

Why primeflex responsive is inverted? #195

[nharrer]

Yes, the same here. Maybe I am misunderstanding the documentation. Shouldn't sm:xxxx apply xxxx to small screens only? But it seems to be the opposite.

Example with primeflex 3.3.1:

<div class="flex flex-row sm:flex-column gap-2" style="background-color: red">
  <div>aaaa</div>
  <div>bbbb</div>
  <div>cccc</div>
</div>

I would expect to have a flex-direction of column for screens <= 576px. And a row layout otherwise. But it's just the other way around:

Example on Stackblitz: https://stackblitz.com/edit/angular-ivy-khexpu

[nharrer]

Please ignore my last comment. Coming from Angular Flex-Layout, that seemed to be the way it was supposed to work.

But in fact, it is a mobile-first breakpoint system. I only realized that after learning to use Tailwind and studying their documentation:

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.

So sm: means at the breakpoint sm and above. It makes sense now, and everything is working as intended.

However, I have a little critique: The PrimeFlex documentation doesn't mention that at all. So for people some people with a different background, this can be a bit confusing.