web-dev-qa-db-fra.com

Comment rendre les éléments flexbox de la même taille?

Je souhaite utiliser flexbox avec un certain nombre d'éléments de même largeur. J'ai remarqué que flexbox distribue l'espace uniformément, plutôt que l'espace lui-même.

Par exemple:

.header {
  display: flex;
}

.item {
  flex-grow: 1;
  text-align: center;
  border: 1px solid black;
}
<div class="header">
  <div class="item">asdfasdfasdfasdfasdfasdf</div>
  <div class="item">z</div>
</div>

Le premier article est beaucoup plus gros que le second. Si j'ai 3 éléments, 4 éléments ou n éléments, je souhaite qu'ils apparaissent tous sur la même ligne avec une quantité d'espace égale par élément.

Des idées?

http://codepen.io/anon/pen/gbJBqM

cssflexbox
100
Chet

Définissez-les de sorte que leur flex-basis soit 0 (afin que tous les éléments aient le même point de départ) et laissez-les se développer:

flex: 1 1 0

159
Adam

Vous pouvez ajouter flex-basis: 100% pour y parvenir.

Exemple mis à jour 

.header {
  display: flex;
}

.item {
  flex-basis: 100%;
  text-align: center;
  border: 1px solid black;
}

Pour ce que ça vaut, vous pouvez aussi utiliser flex: 1 pour les mêmes résultats.

Le raccourci de flex: 1 est identique à flex: 1 1 0, ce qui équivaut à:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  border: 1px solid black;
}
52
Josh Crozier

Vous devez ajouter width: 0 pour que les colonnes soient égales si le contenu des éléments l’agrandit.

.item {
  flex: 1 1 0;
  width: 0;
}

Voici le lien qui m'a aidé à résoudre mon problème: Toujours égal à flexbox colonnes

32
Jason Song

La réponse acceptée par Adam (flex: 1 1 0) fonctionne parfaitement pour les conteneurs flexbox dont la largeur est soit fixe, soit déterminée par un ancêtre. Situations dans lesquelles vous voulez que les enfants ajustent le conteneur.

Cependant, vous voudrez peut-être que le conteneur soit adapté aux enfants, les enfants étant de taille égale en fonction du plus grand des enfants. Vous pouvez adapter un conteneur flexbox à ses enfants de l'une des manières suivantes:

  • régler position: absolute et non width ou right, ou
  • placez-le dans un emballage avec display: inline-block

Pour ces flexbox conteneurs, la réponse acceptée ne fonctionne pas , NI, les enfants ne sont pas de la même taille. Je suppose que ceci est une limitation de flexbox, car il se comporte de la même manière dans Chrome, Firefox et Safari.

La solution consiste à utiliser une grille au lieu d'une flexbox.

Démo: https://codepen.io/brettdonald/pen/oRpORG

<p>Normal scenario — flexbox where the children adjust to fit the container — and the children are made equal size by setting {flex: 1 1 0}</p>

<div id="div0">
  <div>
    Flexbox
  </div>
  <div>
    Width determined by viewport
  </div>
  <div>
    All child elements are equal size with {flex: 1 1 0}
  </div>
</div>

<p>Now we want to have the container fit the children, but still have the children all equally sized, based on the largest child. We can see that {flex: 1 1 0} has no effect.</p>

<div class="wrap-inline-block">
<div id="div1">
  <div>
    Flexbox
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div2">
  <div>
    Flexbox
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

<br><br><br><br><br><br>
<p>So let's try a grid instead. Aha! That's what we want!</p>

<div class="wrap-inline-block">
<div id="div3">
  <div>
    Grid
  </div>
  <div>
    Inside inline-block
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>
</div>

<div id="div4">
  <div>
    Grid
  </div>
  <div>
    Absolutely positioned
  </div>
  <div>
    We want all children to be the size of this text
  </div>
</div>

body {
  margin: 1em;
}

.wrap-inline-block {
  display: inline-block;
}

#div0, #div1, #div2, #div3, #div4 {
  border: 1px solid #888;
  padding: 0.5em;
  text-align: center;
  white-space: nowrap;
}

#div2, #div4 {
  position: absolute;
  left: 1em;
}

#div0>*, #div1>*, #div2>*, #div3>*, #div4>* {
  margin: 0.5em;
  color: white;
  background-color: navy;
  padding: 0.5em;
}

#div0, #div1, #div2 {
  display: flex;
}

#div0>*, #div1>*, #div2>* {
  flex: 1 1 0;
}

#div0 {
  margin-bottom: 1em;
}

#div2 {
  top: 15.5em;
}

#div3, #div4 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

#div4 {
  top: 28.5em;
}
5
Brett Donald