web-dev-qa-db-fra.com

Comment utiliser "flex-flow: column wrap"?

Version courte

Lorsque vous utilisez flex-flow: column wrap et display: inline-flex, il ne se réduit pas comme inline-block:

 enter image description here 

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
#flexdesc {position: absolute; top: 25px;}
#flex {
  top: 50px;
  position: absolute;
  display: inline-flex;
  flex-flow: row wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  max-width: 180px;
  align-content: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-Origin: top left;
}

#flex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
  top: 300px;
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 200px;
  align-content: flex-start;
  transform-Origin: top left;
}

#failex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="flexdesc">What I expect it to do</div>
  <div id="flex">
    <p>foo</p>
    
    <!-- add extra "<p>foo</p>" here. -->
  </div>
  <div id="failexdesc">What it does</div>
  <div id="failex">
    <p>foo</p>
  </div>
</body>
</html>

Remarquez comment la taille de chaque conteneur flexible change (ou ne change pas!)

Je souhaite ce comportement car je souhaite placer ces éléments côte à côte pour un site Web à défilement horizontal.

Pourquoi ça ne rétrécit pas? Comment puis-je le faire rétrécir?





Question originale

flex-flow: row wrap est assez simple à comprendre. Si rien n’est "fléchissant", cela ressemble à des éléments en ligne; Il coule à droite jusqu'à ce qu'il ne puisse plus le faire, à quel point il crée une nouvelle ligne.

flex-flow: column wrap avec display: flex est similaire. Il descend jusqu'à ce qu'il ne puisse plus couler (max-width??), Puis commence une nouvelle colonne. Bien sûr, puisque le parent est display: flex, il s’agit d’un élément de niveau bloc, de sorte que cette colonne sera à moitié terminée, car align-content est défini par défaut sur stretch. Je pourrais facilement changer cela en flex-start pour que la nouvelle colonne soit adjacente à la précédente.

... mais le conteneur est encore trop large. C'est toujours un bloc et remplit la largeur de son parent.

J'ai besoin que la flexbox se rétracte pour s'adapter à ses colonnes. Pourquoi? J'essaie d'utiliser flexbox dans un site Web à défilement horizontal. Certes, je pourrais simplement laisser les enfants déborder, mais ce débordement a tendance à ... casser des choses ... alors j'ai pensé que j'avais besoin de flex-flow: column wrap avec display: inline-flex. J'espérais un effet "de haut en bas, de gauche à droite", dans lequel le parent n'a pas d'espace vide.

... et ensuite this est arrivé. En chrome, la largeur du parent est égale à la somme des largeurs des enfants, mais sinon, le retour à la ligne est normal. Dans Firefox, le parent est sur toute la largeur et ne fait que grandir pour pouvoir accueillir les éléments (je ne pense pas que Firefox supporte l’emballage). Dans IE11, la largeur est correcte, mais les enfants débordent (même en dehors du corps). 

Je suis tellement confus.

Qu'est-ce que je fais mal ici? Je comprends que flexbox est une fonctionnalité plus récente, mais je ne peux pas dire à quel point c'est de ma faute par rapport au navigateur.

À leur façon, je teste cela en chrome. Une solution ne contenant que du chrome me convient parfaitement. (Mais une solution fourre-tout élégante, c'est toujours Nice!)

Voici le code de la démo à laquelle j'ai lié , au cas où jsbin serait en panne:

var ascending = true;
   setInterval(function() {
     var parent = document.getElementById('flex');
     if (ascending) {
       var child = document.createElement('p');
       child.innerHTML = "f";
       parent.appendChild(child);
     } else {
       parent.removeChild(parent.children[0]);
     }
     if (parent.children.length <= 1) ascending = true;
     if (parent.children.length >= 30) ascending = false;
   }, 200);
#flex {
  display: inline-flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  align-content: flex-start;
}
p {
  margin: 0;
  outline: 1px solid black;
  width: 10px;
}
body {
  height: 150px;
  width: 300px;
  outline: 1px dashed black
}
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <div id="flex">
    <p>f</p>
    <!-- add extra "<p>foo</p>" here. -->
  </div>
</body>
</html>

csscss3flexbox
40
uber5001

C'était un bug en effet. Voici les liens vers le tracker:

https://bugs.chromium.org/p/chromium/issues/detail?id=247963https://bugs.chromium.org/p/chromium/issues/detail?id= 507397

Comme l'OP voulait:

J'ai besoin de la flexbox pour réduire ses colonnes. Pourquoi? J'essaie d'utiliser flexbox dans un site Web à défilement horizontal. Certes, je pourrais laisser les enfants déborder, mais ce débordement a tendance à ... casser des choses. J'ai donc pensé que j'avais besoin de flex-flow: enveloppement de colonne avec display: inline-flex. J'espérais un effet "de haut en bas, de gauche à droite", dans lequel le parent n'a pas d'espace vide.

Nous pouvons simplement y arriver avec flex-flow: column wrap;, align-content: flex-start; et un wrapper à hauteur fixe.

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

Violon mis à jour: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

5
Asim K T

Il est peut-être tard, mais je pense que Firefox ne prend pas complètement en charge le «retour à la colonne». Comme vous l'avez dit, vous en aurez besoin sous Chrome. Dans ce cas, vous pouvez voir ce que Chris Coyier a fait: ajouter un préfixe webkit -> http://css-tricks.com/snippets/css/a-guide-to -flexbox/

L'espoir n'est pas en retard: /

0
Adrián.