CSS Flexbox：flex-wrap一个div到两行，每行都有单独的增长

Question

我是Flexbox的新手，但是我在一个网络项目中使用它来使用<div>属性在order元素中移动嵌入式视频播放器。它完美地适用于此。这一切都显示在一行上。在下图中，那些视频播放器位于“甲板上”区域，与<div>在flex-direction: row。

我的Web应用程序就像这样（粗略地）：

CONTAINER - flex direction column.
 ---------------------------------------------------------
|                                                         | "menu bar"
 ---------------------------------------------------------
| iframe. Flex 6                         | iframe. Flex 1 | "main area"
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
|                                        |                |
 ---------------------------------------------------------
| iframe      | iframe       | iframe        | iframe     | "on deck" area
|             |              |               |            |
|             |              |               |            |
 ---------------------------------------------------------

在图表右侧命名的每个区域都是带有<div>的flex-direction: row。

我希望完成的是将“主区域”和“甲板区域”组合成一个div flex行，并且总是让当前位于“主区域”的两个iframe显示在一行上，所有在它下面的“甲板上”区域的iframe因此，flex 6 iframe将是0阶，其旁边的flex 1 iframe将是1阶，而它下面的所有内容都是2阶3等。这样，那些iframe可以移入和移出“main” “无需重新加载的区域，如果可以通过更改每个iframe的顺序，我希望避免性能损失。

我知道有一个名为flex-wrap的属性，如果它们不合适，可以让单个div中的元素换行到下一行。我在缠绕这个问题时遇到了麻烦。

我的问题是 - 有什么方法可以强制flex iframe总是出现在div的第一行，其中flex-wrap被设置为wrap？

Answer 1

我认为你对flex-wrap.有正确的想法你可以将主要区域和甲板上的所有物品组合在一个弹性容器中，并将它们包裹起来形成你想要的布局。

要使其工作，您还需要flex-basis属性来设置Flex 6和Flex 1的宽度。

例如，您将告诉Flex 6宽70％，Flex 1宽30％。这使得两个项目占据该行的100％，迫使所有其他项目换行到下一行。

这是一个DEMO。

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px dashed black;
    width: 720px;
}

.box1 { order: 0; flex-basis: calc(70% - 20px); }
.box2 { order: 1; flex-basis: calc(30% - 20px); }
.box3 { order: 2; flex: 1; }
.box4 { order: 3; flex: 1; }
.box5 { order: 4; flex: 1; }
.box6 { order: 5; flex: 1; }

.box {
    height: 50px;
    width: 100px;
    margin: 10px;
    background-color: lightgreen;
    box-sizing: border-box;
    
    /* non-essential; for styling numbers only */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
}

<div class="container">
    <div class="box box1"><span>1</span></div>
    <div class="box box2"><span>2</span></div>
    <div class="box box3"><span>3</span></div>
    <div class="box box4"><span>4</span></div>
    <div class="box box5"><span>5</span></div>
    <div class="box box6"><span>6</span></div>
</div>