wake-up-neo.com

Wie implementiere ich eine mehrzeilige Flexbox?

Trotz meines Googlings habe ich einige Beispiele gefunden, wie Sie Flexboxen mit mehreren Leitungen implementieren können. Keiner der Codes, die ich aus Beispielen erhalten habe, hat funktioniert. Ich habe drei Elemente in einer Flexbox und ich möchte, dass der erste oben und der zweite und der 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 geben Sie ihm eine festgelegte Breite, die jedoch nicht umbrochen wird, selbst wenn das erste Element eine Breite von 100% hat. Vermisse ich bestimmte Herstellerpräfixe oder ist meine Syntax falsch?

30
zakdances

Die Spezifikation der Flexbox hat in den letzten Monaten geändert und Sie verwenden die alte Syntax. Die neue Spezifikation, die ich glaube, wird derzeit nur in Chrome Canary und in gewissem Umfang in der neuesten Version von Chrome implementiert. (Es ist ein wenig fehlerhaft) Mehrere Boxzeilen sind weg. Um dieses vertikale Layout zu erreichen, gibt es einige Möglichkeiten. Mit -webkit-flex-direction: Spalte; so 

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

}

Verwenden der Verpackung:

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

23
Rob

Verwenden Sie das flex-direction-Attribut.

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

siehe fließender Artikel: http://fend-tricks.com/flexbox-intro/

0