JSFiddle - React, Tailwind, and code Playground

HTML

<h1>flex-direction: column;</h1>
<section class="flex-container row">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</section>

<h1>More items</h1>
<section class="flex-container row">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</section>

<h1>Preserving height/width of the child elements with 'flex-wrap' and 'align-content'</h1>
<section class="flex-container row wrap">    
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</section>

CSS

html, body{ color: white; font: 20px/1.1em Calibri; }
h1{ color: LightGray; line-height: 40px; }

/************************************************************/
.flex-container{
    display: flex; flex-direction: column; height: 350px;
    border: 2px solid SaddleBrown; 
}
.flex-container div{
    width: 50px; height: 50px; margin: 4px; background: chocolate;
}
.wrap{
    flex-wrap: wrap; align-content: flex-start;
}