html - CSS Flexbox : flex-wrap one div to two lines, 每行单独增长

Question

我对 Flexbox 还很陌生，但我在一个 Web 元素中使用它来在 <div> 中移动嵌入式视频播放器。使用 order 的元素属性(property)。它非常适合这个。这全部显示在一行上。在下图中，这些视频播放器位于“甲板上”区域，位于 <div> 中。与 flex-direction: row .

我的网络应用程序的布局如下(大致):

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 就可以移入或移出该“主框架”。 "区域而无需重新加载，这会对性能造成影响，如果可以的话，我想通过更改每个 iframe 的顺序来避免。

我知道有一个名为 flex-wrap 的属性如果单个 div 中的元素不适合，它可以让它们换行到下一行。我很难理解这个问题。

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

Answer 1

我认为你的想法是正确的 flex-wrap.您可以将主区域和甲板中的所有元素合并到一个 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>