web-dev-qa-db-fra.com

Comment implémenter une flexbox multiligne?

Malgré mes recherches sur Google, j'ai trouvé peu d'exemples sur la manière de mettre en œuvre des flexbox à plusieurs lignes. Aucun des codes que j'ai obtenus à partir d'exemples n'a fonctionné. J'ai trois éléments dans une boîte souple et je veux que le premier soit en haut et les deuxième et troisième en 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 sera toujours pas emballer, même si le premier élément a une largeur de 100%. Me manque-t-il certains préfixes de fournisseur ou ma syntaxe est-elle fausse?

htmlcsscss3layoutflexbox
30
zakdances

La spécification flex box a changé au cours des derniers mois et vous utilisez l'ancienne syntaxe. Je crois que la nouvelle spécification n’est actuellement appliquée que dans Chrome Canary et, dans une certaine mesure, dans le dernier chrome. (C'est un peu bogué) Les lignes multiples sont disparues. Pour réaliser cette disposition verticale, il existe plusieurs façons. Utilisation de -webkit-flex-direction: column; alors 

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

}

En utilisant l'emballage:

-webkit-flex-wrap: wrap;

et fixant votre direction à: 

-webkit-flex-direction: row;

Alors 

<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 page de spécifications liée ci-dessus. 

23
Rob

Utilisez l'attribut flex-direction.

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

se référer article qui coule: http://fend-tricks.com/flexbox-intro/

0
Jayampathy Wijesena