将第一个和最后一个项目保留在一行的弹性框中，同时将其余项目移动到其下方

Question

我有一个使用 flexbox 的导航栏，看起来像这样（正常屏幕宽度）：

| div 1 ||                      div 2                    || div 3 |

我怎样才能使布局做到这一点：

| div 1 |              | div 3 |
|            div 2             |

当被压扁时（例如在手机屏幕上）？

这似乎是可能的，但它可能涉及 javascript，因为有一些元素的重新排序。我尝试使用order CSS 属性，但这不是我需要的。要移动我正在使用的行flex-flow。

另外，我正在使用 GWT 创建这个页面。

Answer 1

这是flex 解决方案，带有order + min-width 技巧。

查看 JsFiddle 演示，调整大小并查看。

.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wrap > .a {
    background: lime;
    order: 1;
}
.wrap > .b {
    background: orange;
    order: 2;
    flex: 1;
}
.wrap > .c {
    background: aqua;
    order: 3;
}
@media screen and (max-width: 500px) {
    .wrap > .b {
        background: orange;
        order: 3;
        min-width: 100%;
    }
    .wrap > .c {
        background: aqua;
        order: 2;
    }
}

<div class="wrap">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

您也可以在第一个（A）和最后一个（C）项上使用float，并在中间（B）项上设置clear，以实现小屏幕尺寸的布局变化。

查看 JsFiddle 演示，调整大小并查看。

.wrap {
    overflow: auto;
}
.wrap > .a {
    float: left;
    background: lime;
}
.wrap > .c {
    float: right;
    background: aqua;
}
.wrap > .b {
    overflow: auto;
    background: orange;
}
@media screen and (max-width: 500px) {
    .wrap > .b {
        clear: both;
    }
}

<div class="wrap">
    <div class="a">A</div>
    <div class="c">C</div>
    <div class="b">B</div>
</div>