web-dev-qa-db-fra.com

Rangées d'égale hauteur dans un conteneur flexible

Comme vous pouvez le constater, le list-items dans le premier row a le même height. Mais les éléments de la seconde row ont des heights différents. Je veux que tous les articles aient un uniforme height.

 enter image description here

Est-il possible d'y parvenir sans donner fixed-height et uniquement en utilisant flexbox?

Voici mon code 

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

htmlcsscss3flexbox
32
Jinu Kurian

La réponse est non.

La raison est fournie dans la spécification flexbox:

6. Lignes flexibles

Dans un conteneur Flex multi-lignes, la taille croisée de chaque ligne est la taille minimale nécessaire pour contenir les éléments flex sur la ligne.

En d'autres termes, lorsqu'il existe plusieurs lignes dans un conteneur Flex basé sur une ligne, la hauteur de chaque ligne ("taille de la croix") est la hauteur minimale nécessaire pour contenir les éléments flex sur la ligne.

Des rangées de hauteur égale, cependant, sont possibles dans CSS Grid Layout:

Sinon, envisagez une alternative JavaScript.

41
Michael_B

Vous pouvez accomplir cela maintenant avec display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}
<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Bien que la grille elle-même ne soit pas une boîte flexible, elle se comporte très semblable à un conteneur flexbox et les éléments de la grille peuvent être flex.

La disposition de la grille est également très pratique dans le cas où vous souhaitez des grilles réactives. Autrement dit, si vous souhaitez que la grille ait un nombre différent de colonnes par ligne, vous pouvez simplement modifier grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

etc...

Vous pouvez le mélanger avec des requêtes multimédia et le modifier en fonction de la taille de la page.

Malheureusement, il n’existe toujours pas de support pour les requêtes de conteneur/les requêtes d’éléments dans les navigateurs (prêts à l’emploi) pour que cela fonctionne correctement lorsque vous modifiez le nombre de colonnes en fonction de la taille du conteneur, et bon à utiliser avec des composants Web réutilisables).

Plus d'informations sur la disposition de la grille:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Prise en charge de la disposition de la grille sur les navigateurs: 

https://caniuse.com/#feat=css-grid

9
Lucas Basquerotto

Non, vous ne pouvez pas y arriver sans définir une hauteur fixe (ou en utilisant un script).

Voici 2 réponses de la mienne, montrant comment utiliser un script pour réaliser quelque chose comme ça:

3
LGSon

Cela semble fonctionner dans les cas où la hauteur du parent est fixe (testé dans Chrome et Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

S'il n'est pas possible d'utiliser des grilles pour une raison quelconque, c'est peut-être la solution.

0
Stanislav E. Govorov

Si vous connaissez les éléments que vous mappez, vous pouvez le faire en effectuant une ligne à la fois . Je sais que c'est une solution de contournement, mais cela fonctionne. 

Pour moi, j'avais 4 éléments par ligne, donc je l'ai divisé en deux lignes de 4 avec chaque ligne height: 50%, me débarrasser de flex-grow, avoir <RowOne /> et <RowTwo /> dans un <div> avec flex-column. Ça fera l'affaire

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>
0
Kevin Danikowski