Keep the first and last items in a flex box on one row while moving the rest beneath it

Question

I have a navbar using flexbox that looks like this (normal screen width):

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

How would I be able to make the layout do this:

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

when squished down (for instance on an phone screen)?

This seems like it might be possible but it could involve javascript since there is some reordering of elements. I tried using the order CSS property, but that isn't what I needed. To move the row I am using flex-flow.

Additionally, I am using GWT to create this page.

I'm on a mobile device so I can't do a test but it seems to me that changing the order is the first thing (which flexbox will do), then force the row to wrap, presumably by enforced widths, then set sizes. Wrap all that up in a media query. Doable but it depends on what actual look you are going for. A design image would be ideal. Otherwise the question is probably too broad for SO. — Paulie_D, Jun 24 '15 at 18:40
The outcome of @Pangloss's answer below is the exact look that I need. I just need to use flexbox instead of floats and what not. — Milo Gertjejansen, Jun 24 '15 at 18:43

Stickers · Accepted Answer · 2015-06-24T19:14:15.157

Here is the flex solution, with order + min-width tricks.

View the JsFiddle demo, resize and see.

.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>

You could also use float on the first (A) and last (C) items, and set clear on the middle (B) item to achieve the layout change on small screen size.

View the JsFiddle demo, resize and see.

.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>

This is a good answer. The issue is I *must* use flexbox. And I do not believe `float`s work with flexbox. — Milo Gertjejansen, Jun 24 '15 at 18:33
@MiloGertjejansen I played more with flex, updated above, check it out! — Stickers, Jun 24 '15 at 19:01
This works well for Chrome. Do you know any workarounds for Safari and Firefox? I tested it in both and it didn't work as expected. — Milo Gertjejansen, Jun 26 '15 at 12:51
@MiloGertjejansen for Firefox it may related to the `min-width` thing - [here](http://stackoverflow.com/a/30792956/483779), and for Safari you need prefix all the properties - [here](http://stackoverflow.com/a/29928601/483779) — Stickers, Jun 26 '15 at 13:24

Keep the first and last items in a flex box on one row while moving the rest beneath it

1 Answers1