@vcl/vcl/flex-grid/demo/example-positioning.html

The whole VCL in one package

<code>row align-items-center</code>
<div class="container demo">
  <div class="row align-items-center high">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
  </div>
</div>

<code>row align-items-start</code>
<div class="container demo">
  <div class="row align-items-start high">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
  </div>
</div>

<code>row align-items-end</code>
<div class="container demo">
  <div class="row align-items-end high">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
  </div>
</div>

<code>row justify-content-start</code>
<div class="container demo">
  <div class="row justify-content-start">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>  
  </div>
</div>

<code>row justify-content-center</code>
<div class="container demo">
  <div class="row justify-content-center">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
  </div>
</div>

<code>row justify-content-end</code>
<div class="container demo">
  <div class="row justify-content-end">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
  </div>
</div>

<code>row justify-content-between</code>
<div class="container demo">
  <div class="row justify-content-between">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
    <div><div class="democontent">Three</div></div>
  </div>
</div> 

<code>row justify-content-around</code>
<div class="container demo">
  <div class="row justify-content-around">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
    <div><div class="democontent">Three</div></div>
  </div>
</div>

<code>row justify-content-evenly</code>
<div class="container demo">
  <div class="row justify-content-evenly">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
    <div><div class="democontent">Three</div></div>
  </div>
</div>

<code>row</code>
<div class="container demo">
  <div class="row" style="height: 15em">
    <div class="self-start"><div class="democontent">.self-start</div></div>
    <div class="self-center"><div class="democontent">.self-center</div></div>
    <div class="self-end"><div class="democontent">.self-end</div></div>
    <div class="self-stretch"><div class="democontent">.self-stretch</div></div>
  </div>
</div>

<code>row reverse</code>
<div class="container demo">
  <div class="row reverse">
    <div><div class="democontent">One</div></div>
    <div><div class="democontent">Two</div></div>
    <div><div class="democontent">Three</div></div>
    <div><div class="democontent">Four</div></div>
  </div>
</div>