Stack space for flow elements

This feature is best explained here: https://every-layout.dev/layouts/stack/

And an example can be found here: https://jsfiddle.net/c2fbo0u3/1/

In the example I have just added two different space size, 1.5rem and large 3rem, but could be also added more.

As explained in every-layout.dev this is useful when we need to add space between elements, and in addition I added space X and Y, something like already bootstrap m-* utilities offer.

So instead of writing:

<div>
<div></div>
<div class="mt-3"></div>
<div class="mt-3"></div>
</div>

Can be:

<div class="stack-y">
<div></div>
<div></div>
<div></div>
</div>

Or instead of:

<div class="d-flex">
<div></div>
<div class="ml-3"></div>
<div class="ml-3"></div>
</div>

Can be:

<div class="d-flex stack-x">
<div></div>
<div></div>
<div></div>
</div>

Here https://jsfiddle.net/c2fbo0u3/1/ there are all examples, also creating a reverse space for space-x, and nested.

Nested could be also created without using space-nested but just adding for each nested element the same space-x/y classes. Example:

<div class="stack-x stack-nested d-flex">
  <div>Stack nested X One</div>
  <div>Stack nested X Two</div>
  <div class="d-flex">
    <div>Stack nested X One</div>
    <div>Stack nested X Two</div>
    <div>Stack nested X Three</div>
  </div>
</div>

Can be:

<div class="stack-x d-flex">
  <div>Stack nested X One</div>
  <div>Stack nested X Two</div>
  <div class="stack-x d-flex">
    <div>Stack nested X One</div>
    <div>Stack nested X Two</div>
    <div>Stack nested X Three</div>
  </div>
</div>

[mdo]

This is very familiar to Pylon’s hstack/vstack approach. Very intriguing to me also considering #31995 and not wanting to have a single component-based layout option. I’d go further than here and suggest that it be display: flex by default and offer inline-spacers via CSS customer properties. Example: https://codepen.io/emdeoh/pen/Bazxbrq.

[XhmikosR]

Fixed by #33986