Comment puis-je mettre en œuvre un multi-ligne flexbox?

Malgré mes recherches sur Google, j'ai trouvé quelques exemples sur la façon de mettre en œuvre plusieurs ligne flexboxes. Rien dans le code que j'ai obtenu à partir d'exemples a travaillé. J'ai trois éléments à l'intérieur de flexbox et je veux le premier à être sur le dessus et le second et le troisième à être sur la ligne du bas.

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

J'ai essayé d'utiliser ces propriétés:

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

#element1 {
  width: 100%;
}

et en lui donnant une largeur définie, mais il ne veut toujours pas envelopper, même si le premier élément est d'une largeur de 100%. Suis-je en manque certaines fournisseur de préfixes ou est ma syntaxe mal?

InformationsquelleAutor zakdances | 2012-10-02
  1. 24

    Le flex de la boîte de spec a changé au cours des derniers mois et que vous utilisez l'ancienne syntaxe. La nouvelle spec, je crois, n'est actuellement mis en œuvre que dans Chrome Canary et dans une certaine mesure la plus récente de chrome. (Il est un peu buggé) de la boîte de lignes multiples est parti pour réaliser cette mise en page verticale, il existe quelques façons. Aide -webkit-flex-direction:colonne; de sorte 

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

    et css :

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

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

}

    À l'aide d'emballage:

    -webkit-flex-wrap: wrap;

    et la configuration de votre direction: 

    -webkit-flex-direction: row;

    Donc 

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

    }

    Il y a tout un tas d'exemples sur la spécification de la page liée ci-dessus.

    • Vous pouvez maintenant utiliser directement les flex valeur, sans préfixe, qui est pris en charge par la plupart des navigateurs maintenant.
    InformationsquelleAutor Rob
  2. 1

    Utiliser le flex-direction attribut.

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

    reportez-vous qui coule de l'article :
    http://fend-tricks.com/flexbox-intro/

    • Cette page web a été désactivé.
    InformationsquelleAutor Jayampathy Wijesena