Wie implementiere ich eine mehrzeilige Flexbox?

Trotz meines Googelns habe ich einige Beispiele gefunden, wie man mehrzeilige Flexboxen implementiert. Keiner der Codes, die ich aus Beispielen erhalten habe, hat funktioniert. Ich habe drei Elemente in einer Flexbox und ich möchte, dass das erste oben und das zweite und dritte in der unteren Reihe sind.

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

Ich habe versucht, diese Eigenschaften zu verwenden:

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

#element1 {
  width: 100%;
}

und ihm eine festgelegte Breite geben, aber es wird immer noch nicht umbrochen, selbst wenn das erste Element eine Breite von 100 % hat. Fehlen mir bestimmte Herstellerpräfixe oder ist meine Syntax falsch?

Die Flexbox-Spezifikation hat geändert in den letzten Monaten und Sie verwenden die alte Syntax. Die neue Spezifikation ist meines Erachtens derzeit nur in Chrome Canary und in gewissem Maße im neuesten Chrome implementiert. (Es ist ein wenig fehlerhaft) Box-Lines Multiple ist weg, also gibt es ein paar Möglichkeiten, um dieses vertikale Layout zu erreichen. Mit -webkit-flex-direction:column; Also

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

und CSS:

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

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

}

Verpackung verwenden:

-webkit-flex-wrap: wrap; 

und setzen Sie Ihre Richtung auf:

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

    }

Es gibt eine ganze Reihe von Beispielen auf der oben verlinkten Spezifikationsseite.

Verwenden Sie die flex-direction Attribut.

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

Siehe folgenden Artikel:
http://fend-tricks.com/flexbox-intro/