web-dev-qa-db-fra.com

Flexbox colonnes se chevauchent

J'essaie d'imiter la vue de liste groupée WinJS à l'aide de flexbox. Je me rapproche (je pense) sauf que les colonnes se chevauchent lors du redimensionnement.

http://jsfiddle.net/w8ts4Lnx/5/

Je veux que les articles restent à l'intérieur du groupe et que le groupe se développe horizontalement.

body {
    height: 100%;
    display: flex;
    flex-flow: column wrap;
}

h1 {
   padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: column wrap; 
    max-height: 600px;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    width: 200px;
}

Des idées sur ce qui me manque?

flexbox
13
martian

Si vous ne voulez pas que votre contenu déborde du conteneur, vous devez spécifier flex-shrink: 0;

flex-shrink source

Ce composant `` nombre '' définit le rétrécissement flexible à long terme et spécifie le facteur de rétrécissement flexible, qui détermine le degré de rétrécissement de l'élément flexible par rapport au reste des éléments flexibles dans le conteneur flexible lorsque l'espace libre négatif est distribué. Lorsqu'il est omis, il est défini sur 1. Le facteur de rétrécissement de flexion est multiplié par la base de flexion lors de la distribution de l'espace négatif.

Je ne sais pas quel comportement winJS vous essayez d'imiter car je n'ai jamais utilisé winJS, mais je pense que cela est plus proche du bon comportement que vous cherchez à obtenir: http://jsfiddle.net/w8ts4Lnx/11 /

34
Flowers

Les colonnes se chevauchent car le contenu ne tient pas. Les objets ne rentrent pas dans le groupe, ils se déplacent donc. Pour résoudre ce problème, vous devez spécifier une stratégie de débordement pour le groupe-div, avec " débordement " comme ceci (le dernier):

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap; 
    max-height: 600px; 

    overflow: hidden;
}

La valeur par défaut est visible, ce qui les fait tomber à l'extérieur. En savoir plus ici: http://www.w3schools.com/cssref/pr_pos_overflow.asp

Il existe d'autres options que hidden. Vous pouvez définir un défilement vertical/horizontal, ou les deux. Choisissez simplement ce qui vous rapproche de la "vue de liste groupée WinJS" souhaitée. Essayer:

overflow-x: scroll;
overflow-y: auto;

ou

overflow-y: auto;
overflow-x: scroll;

Bon codage!

3
wojjas

C'est la bonne réponse qui corrige les colonnes qui se chevauchent:

.flex-container {
   display: flex;
   flex-flow: column;
}

.flex-item {
   flex: 1 0 auto;
}
1
user3376065

C'est peut-être un peu tard, mais j'ai fait un codepen, où je travaillais avec ce problème, peut-être que cela aidera les gens qui liront cette question.

html

<body>
  <div class="test-container">
    <div class="item item1">
      item1
    </div>
    <div class="item item2">
      item2
    </div>
    <div class="item item3">
      item3
    </div>
  </div>
</body>

css (scss)

.test-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 50%;
  background-color: red;
  padding-left: 2rem;

  .item {
    opacity: 0.6;
    height: 100px;
    width: 100px;
    flex-basis: 100px;
    margin-left: -2rem;
  }

  .item1 {
    background-color: cyan;
    z-index: 10;
  }

  .item2 {
    background-color: blue;
    color: red;
    z-index: 20;
  }

  .item3 {
    background-color: black;
    z-index: 30;
    color: white;
  }
}

https://codepen.io/Garma/pen/ZZmNWg?editors=11

À votre santé

1
Garma

Je pense qu'il serait préférable de ne pas définir de largeur car vous voulez flexbox pour le déterminer dynamiquement. Je l'ai donc supprimé et j'ai ensuite ajouté flex Grow pour augmenter le premier groupe.

http://jsfiddle.net/mspriyakk/vv3tfrtv/3/

#content > .group:nth-of-type(1) {
    flex-grow: 2;   
}
#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}
1
mspriyakk

"laissez le groupe se développer horizontalement" - Vous devez utiliser la flex-direction comme "ligne" sur le .group, et vous devez envelopper les groupes à l'intérieur du #content, alors il ne se chevauchera plus ..

http://jsfiddle.net/gafcvq9b/2/

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    display: flex;
    flex-flow: row wrap; 
    max-height: 600px;    
}
1
Ĭsααc tիε βöss

J'ai rencontré un problème similaire et dans mon cas, le correctif supprimait le paramètre de hauteur du style de conteneur. Cela a permis à la taille du conteneur d'augmenter avec les hauteurs de navigateur changeantes.

0
Craig Tanaka