How to align row flex elements in columns?
<p>I use <code>flex</code> to align my elements. <code>#sentinels</code> is the outermost container and each line of <code>div</code> (green in the example below) has the class <code>line</code>.</p>

<pre><code>#sentinels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.line {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
</code></pre>

<p>This gives</p>

<p><a href="https://i.stack.imgur.com/sHln3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sHln3.png" alt="enter image description here"></a></p>

<p>I would like, however, to have the <code>div</code> aligned in columns:</p>

<p><a href="https://i.stack.imgur.com/Gac5Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gac5Q.png" alt="enter image description here"></a></p>

<p>Is such a setup possible with <code>flex</code>? </p>