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

Question

我对 Flexbox 还很陌生，但我在一个 Web 项目中使用它来使用 order 属性在 <div> 元素中移动嵌入式视频播放器。它非常适合这个。这都显示在一行上。在下图中，这些视频播放器位于“甲板上”区域，位于<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 将是 order 0，flex 1 iframe 旁边将是 order 1，并且它下面的所有内容都是 order 2、3 等。这样，这些 iframe 可以移入和移出那个“主" 区域而无需重新加载，如果可以的话，我想通过更改每个 iframe 的顺序来避免性能下降。

我知道有一个名为flex-wrap 的属性可以让单个 div 中的元素在不适合的情况下换行到下一行。我很难理解这一点。

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

Answer 1

我认为您对flex-wrap. 的想法是正确的。您可以将 main area 和 on deck 中的所有项目组合在一个 flex 容器中，并让它们包裹形成您想要的布局。

要完成这项工作，您还需要 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>