web-dev-qa-db-fra.com

CSS Conservez la même taille pour tous les éléments enfants flexbox

Mon sass (utiliser une boussole pour obtenir les préfixes) est affiché dans ce violon :

.container
   @include display-flex
   @include flex-wrap(wrap)
   .item
       @include flex-grow(1)
       @include flex-basis(190px)

flexbox grid

Bien que, je voudrais que les deux éléments en bas aient le même objet que ceux en haut.

Je ne veux pas les laisser à gauche et fixer leur largeur, cela ne fonctionnera pas pour mon arrangement dans d'autres résolutions.

Toutes les suggestions sont les bienvenues!

cssflexbox
22
TaylorMac

Vous avez 2 façons de faire cela:

flex-grow: 0 ( violon )

Si vous définissez flex-grow sur 0, vous indiquez aux éléments de conserver leur largeur et d’agrandir l’espace vide. En utilisant flex-grow: 1, les éléments augmenteront la largeur pour s’adapter à l’espace.

objets invisibles ( violon )

Ajoutez des éléments invisibles après les éléments normaux avec les mêmes propriétés de flex. Vous obtiendrez un regard aligné à gauche.

Dans cette solution, il y aura le même nombre d'éléments dans toutes les lignes visibles. Assurez-vous donc d'ajouter suffisamment d'éléments invisibles pour fonctionner correctement sur des écrans plus grands.

27
Igor

Je ne peux pas répondre à la réponse d'Igor pour suggérer une amélioration de sa solution, mais son violon ne fonctionne pas entièrement pour une mise en page réactive. 

La première solution avec flex-grow: 0; ne permet pas d'étirer les éléments pour remplir les conteneurs. La deuxième solution avec des éléments invisibles fonctionne, mais augmente la hauteur du conteneur. Enlever les marges supérieure/inférieure a toutefois fait l'affaire.

J'ai modifié jsfiddle pour le rendre réactif et corriger les éléments invisibles qui étendaient le conteneur, en utilisant des commentaires pour expliquer ce que j'avais changé. Cela ne fonctionne toujours pas si le conteneur est plus grand que la rangée d'éléments: ( fiddle ) 

J'ai aussi fait ma propre solution simple. J'essayais de le faire moi-même et la solution d'Igor m'a énormément aidé. ( violon )

.container {
  display: flex;
  flex-flow: row wrap;
  
  /*style*/
  padding: 0.5em;
  background-color: royalblue;
}
.item {
  flex: 1 0 80px;
  
  /*style*/
  margin: 0.5em;
  padding: 1em;
  text-align: center;
  background-color: lightblue;
}
.filler {
  flex: 1 0 80px;
  height: 0px;
  
  /*style*/
  margin: 0 0.5em;
  padding: 0 1em;
}
<div class="container">
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>
  <div class="item">sm</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">medium</div>
  <div class="item">medium</div>
  <div class="item">large item</div>
  <div class="item">sm</div>

  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
  <div class="filler"></div>
</div>

4
Ray

Vous pouvez obtenir que les éléments cessent d’agrandir avec max-width sur les éléments ( fiddle ). Pour les aligner à gauche, utilisez un justify-content différent sur le wrapper ( fiddle ).

J'espère que ça marche! Ont seulement regardé cela dans Chrome.

2
vvviolet

vous pouvez essayer de définir flex-basis: 50%; et flex-grow: 1. 

.parent {
  display: flex;
  width: 300px;
  height: 300px;
}

.child {
   flex-basis: 50%;
   flex-grow: 1;
   background: tomato;
   border: 1px solid #ccc;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
<div>

1
ken

Pour ce type de problème, je viens d'utiliser float.

.container {
  overflow: hidden;
}

.child-item {
  float: left;
}
0
Nick Retallack