How do I implement a multi-line flexbox?

Question

Despite my Googling, I've found few examples on how to implement multiple line flexboxes. None of the code I've gotten from examples has worked. I have three elements inside a flexbox and I want the first to be on top and the second and third to be on the bottom row.

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

I've tried using these properties:

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

and giving it a set width but it still won't wrap, even if the first element has a width of 100%. Am I missing certain vendor prefixes or is my syntax wrong?

Be aware that firefox currently (25) does not supports multi-line flexbox flexbox layouts, due to a [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=702508). — Frank Lämmer, Nov 17 '13 at 19:52
See also https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — RJFalconer, Oct 31 '18 at 14:41

score 32 · Accepted Answer · answered Oct 02 '12 at 20:27

The flex box spec has changed in the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It's a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a few ways. Using -webkit-flex-direction:column; so

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
</div>

and css :

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    width: 500px;
    height: auto;
    min-height: 200px;
}

#flexbox .box {
    -webkit-flex: 1;

}

Using wrapping:

-webkit-flex-wrap: wrap;

and setting your direction to:

-webkit-flex-direction: row;

So

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
    <div class="box">DIV 4</div>
    <div class="box bigger">DIV 5</div>
    <div class="box">DIV 6</div>
</div>

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    width: 500px;
    height: auto;
    min-height: 200px;
    }

#flexbox .box {

    -webkit-flex: 130px 1;

    }

#flexbox .box.bigger {

    -webkit-flex: 330px 1;

    }

There's a whole bunch of examples on the spec page linked above.

You can now directly use the `flex` value without any prefix, which is supported by most browsers now. — Kevin, Feb 08 '16 at 17:29
Seems like `flex-wrap: wrap` should more explicitly be part of this answer. — RonC, Feb 22 '23 at 19:56

score 1 · Answer 2 · edited Dec 08 '20 at 15:01

1

Use the flex-direction attribute.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Refer to the following article: http://fend-tricks.com/flexbox-intro/

edited Dec 08 '20 at 15:01

iBug

35,554
7
89
134

answered Aug 30 '17 at 11:27

Jayampathy Wijesena

1,670
1
18
26

1

This webpage has been deactivated. – Franz Holzinger Jul 06 '18 at 12:12
@FranzHolzinger Hi, thanks for pointing that out. I've replaced it with its last Wayback Machine snapshot. – iBug Dec 08 '20 at 15:01

score 0 · Answer 3 · answered Aug 02 '23 at 22:33

Short answer: you're probably looking for flex-wrap: wrap

Then you might be interested in:

justify-content - spacing around / between the items
flex-direction - change the way the items flow (row, column, reverse, etc)

But then you might have a problem where the items in the last row don't layout correctly. So you'll give up on flex, and use display: grid per this answer, something like:

display: grid;
grid-template-columns: repeat(auto-fill, 150px);
justify-content: space-between;
grid-gap: 20px;

Which is only very slightly less supported than flex is.

How do I implement a multi-line flexbox?

3 Answers3

Linked