web-dev-qa-db-fra.com

La largeur du conteneur de la boîte flexible ne croît pas

Lorsque vous utilisez une boîte flexible dans le sens des lignes par défaut, la hauteur du conteneur augmente pour contenir tous les éléments flex, même s'il est positionné de manière absolue.

#container {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  height: 200px;
}

Voir http://codepen.io/tamlyn/pen/dPjLoN/?editors=110

Toutefois, si la direction de flexion est modifiée en colonne, le conteneur se réduit à la largeur d'un seul élément flexible, même si les éléments sont renvoyés à la colonne suivante.

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#container > div {
  flex: 0 0 200px;
  width: 200px;
}

Voir http://codepen.io/tamlyn/pen/rarbeN?editors=110

Comment faire en sorte que le conteneur contienne tous les éléments flexibles en mode column?

csscss3flexbox
15
Tamlyn

J'ai en fait trouvé une solution CSS uniquement, mais ce n'est pas la solution la plus parfaite au monde. La voici: http://codepen.io/anon/pen/vEPBKK

Le truc ici est de créer un conteneur visibility: collapsed. Dans flex, les objets visibility: collapsed sortent du flux de flexion normal mais conservent leurs dimensions aux fins de la présentation. Cela élargit le conteneur Flex à la largeur souhaitée mais ne modifie pas les éléments Flex. Il y a cependant quelques mises en garde:

  1. Cela nécessite un peu de bidouillage. Comme vous pouvez le constater, le <div> magique est une largeur définie, mais il utilise :nth-child pour déterminer le nombre de cases qui le précèdent. Si votre conception réelle dépasse 3 rangées ou moins, vous devrez l’ajuster et la plupart du temps la largeur de l’objet.
  2. En raison d'un bug de rendu, cela ne fonctionne pas dans IE. Heureusement, l'implémentation incorrecte d'IE fait exactement ce que vous vouliez au départ sans aucune modification. Tout ce que vous avez à faire est de donner IE sa propre feuille de style avec des instructions conditionnelles et de lancer le bon vieux div.magic avec display: none.

HTML

<div id="container">
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="fb"></div>
  <div class="magic"></div>
</div>

CSS

#container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #f00;
  height: 650px;
  padding: 1px;
}

#container div.fb {
  border: 1px solid #555;
  flex: 0 0 200px;
  background-color: #ccc;
  width: 200px;
  margin: 1px;
  height: 200px;
}

#container > div.magic {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: collapsed;
}

#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
  width: 408px;
}

#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
  width: 612px;
}

#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
  width: 816px;
}
4
Joshua Whitley

Je pense que c'est le CSS que vous recherchez:

#container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid #f00;
  padding: 1px;
}

#container > * {
  border: 1px solid #555;
  background-color: #ccc;
  height: 200px;
  width: 200px;
  margin: 1px;
}

Le conteneur contiendra toujours la largeur de son conteneur, dans ce cas la page, mais maintenant les cases s’y ajusteront correctement.

Faites-moi savoir si j'ai mal compris votre question.

Mettre à jour

Cela fait plusieurs jours que je joue avec ce que vous demandez, et il semble vraiment qu'il ne soit pas possible de faire ce que vous demandez ... du moins, pas dans la direction que vous demandez.

Le conteneur veut être la largeur maximale possible. Sauf si vous forcez le conteneur à avoir la largeur exacte, il ne sera alors pas utilisé pour la totalité de la largeur, mais il ne fléchira pas non plus avec le contenu en flexion.

0
FiSH GRAPHICS