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

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以在小屏幕尺寸上实现布局更改。< / p>

查看 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>