Question

我对Flexbox很陌生，但我在网络项目中使用它来使用<div>属性在order元素中移动嵌入式视频播放器。它完美地适用于此。这一切都显示在一行上。在下图中，那些视频播放器位于“＃34; on the deck＆＃34;区域，位于<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。

我希望完成的目标是结合主要领域＆＃34;和＃34;在甲板区域＆＃34;到一个div flex行，并且总是有两个iframe当前在＆＃34;主要区域＆＃34;显示在一条线上，所有的iframe都在＆＃34;甲板上＃34;它下面的区域。因此，flex 6 iframe将是0阶，其旁边的flex 1 iframe将是1阶，而它下面的所有内容都是2阶3等。这样，那些iframe可以移入和移出＃＆＃ 34;主＆＃34;没有重新加载的区域，如果我可以通过更改每个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>

CSS Flexbox：将一个div灵活地换行到两行，每行都有单独的增长

1 个答案: