CSS Flexbox: flex-wrap one div to two lines, with separate growth on each line
<p>I'm pretty new to Flexbox, but I'm using it in a web project to move embedded video players around in a <code>&lt;div&gt;</code> element using the <code>order</code> property. It works perfectly for this. This is all displayed on one line. In the diagram below, those video players are in the "on deck" area, in a <code>&lt;div&gt;</code> with <code>flex-direction: row</code>.</p>

<p>My web application is laid out like this (roughly):</p>

<pre><code>CONTAINER - flex direction column.
 ---------------------------------------------------------
|                                                         | "menu bar"
 ---------------------------------------------------------
| iframe. Flex 6                         | iframe. Flex 1 | "main area"
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
 ---------------------------------------------------------
| iframe      | iframe       | iframe        | iframe     | "on deck" area
|             |              |               |            |
|             |              |               |            |
 ---------------------------------------------------------
</code></pre>

<p>Each of those areas named on the right of the diagram is a <code>&lt;div&gt;</code> with <code>flex-direction: row</code>.</p>

<p>What I'm hoping to accomplish is to combine the "main area" and "on deck area" into a single div flex row, and to always have the two iframes currently in the "main area" show up on one line, with all of the iframes in the "on deck" area below it. So the flex 6 iframe would be order 0, the flex 1 iframe next to it would be order 1, and everything below it would be order 2, 3, etc. That way, those iframes could be moved into and out of that "main" area without having to reload, which has a performance hit I'd like to avoid if I can by changing each iframe's order.</p>

<p>I know there's a property called <code>flex-wrap</code> which can let elements in a single div wrap to the next line if they don't fit. I'm having trouble wrapping my head around this.</p>

<p>My question is - is there some way I can force flex iframes to always appear on the first line of a div where <code>flex-wrap</code> is set to <code>wrap</code>?</p>