Purpose?

[jesperordrup]

I'm curious - what's the added value by using this component rather than just styling html direct?

[himynameisdave]

Hi @jesperordrup.

You'd use this component if you want to abstract away some of that CSS. Maybe you don't want to add a <style> tag, or maybe you're using lots of flexbox items across your project and want a reusable solution with sane defaults.

Which looks more readable/reusable to you:

1. CSS in Svelte:

   <style>
     .some-flex {
       display: flex;
       flex-direction: column-reverse;
       justify-content: space-between;
     }
   </style>
   
   <div class="some-flex">
     <!-- Some flex children. -->
   </div>

2. Svelte's new style directives:

   <div
     style:display="flex"
     style:flex-direction="column-reverse"
     style:justify-content="space-between"
   >
     <!-- Some flex children -->
   </div>

3. Using this component:

   <Flex direction="column" justify="between" reverse>
     <!-- Some flex children -->
   </Flex>

For me it's 3. Especially because when I need flexbox, I'm usually trying to vertically and horizontally center items in a flex row, which are the defaults. This is why I built this component.

As I've said many times before, if you don't like this component or it doesn't suit your use-case, you don't have to use it. Thanks.

[jesperordrup]

Thanks for taking time to explain.