Flexbox Layout Pattern: 5 Square (1 Large, 4 small)
<p>I'm trying to put together a flexbox layout - for the purposes of this question I'll call it a 'square five block' layout (see image) - but I'm running into trouble, as all the experiments I have tried do not wrap correctly.</p>

<p>I've seen the same layout done using floats, but I was hoping to future-proof it a little and use a more up-to-date method - hence flexbox. I've tried searching for this pattern but there doesn't appear to be a consistent name for it, so finding similar examples is proving tough.</p>

<p>I'm using viewport units too to ensure that the blocks remain perfectly square, all based on viewport widths (vw) units.</p>

<pre><code>div { width: 25vw; height: 25vw; }
div:first-of-type { width: 50vw; height: 50vw; }
</code></pre>

<p>The key features is that all the blocks should be square, the first block however should be the size of the remaining four combined. Has anyone seen or worked on such a layout before?</p>

<p><a href="https://i.stack.imgur.com/7mUVC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7mUVC.png" alt="5-block grid of perfect squars using flexbox; first block should be exact size of the remaining four blocks"></a></p>

<p>Thanks!!</p>