JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-start</h1>
<section class="flex start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>
    
<h1>flex-end:</h1>
<section class="flex end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>center:</h1>
<section class="flex center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</section>

<h1>baseline:</h1>
<section class="flex baseline">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>        
</section>

<h1>stretch:</h1>
<section class="flex stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>        
</section>

CSS

h1{ font: normal 22px/2px Calibri; color: Gray; }
.flex{
    display: flex; flex-direction: column;
    margin: 0 0 30px 0; height: 300px;
    border: 2px solid ForestGreen;
}
.flex div{  
   background: OliveDrab; color: white; 
   height: 50px; width: 50px; margin: 4px;   
}

.start{ align-items: flex-start; }
.end{ align-items: flex-end; }
.center{ align-items: center; }
.baseline{ align-items: baseline; }
.stretch{ align-items: stretch; }