web-dev-qa-db-fra.com

Lignes de hauteur égale dans le sens de la flexion: colonne

J'ai une mise en page flexible avec deux éléments flexibles, affichés sous forme de lignes (flex-direction: column). Les articles doivent avoir une hauteur minimale mais ils doivent conserver la même hauteur dont l'un d'eux a besoin pour grandir. Voir ce violon et diminuer la largeur du volet de résultat; cela force le second .component élément pour augmenter sa hauteur, mais la hauteur du premier .component l'élément reste le même.

Est-il possible de forcer les éléments flexibles à conserver la même hauteur? Veuillez noter que l'essentiel est d'empiler les deux .component éléments, que je ne pourrais pas atteindre sans flex-direction: column; flex-direction: row aurait rendu la même hauteur possible mais l'empilement ne fonctionne pas.

Voici le résultat de ce que j'ai jusqu'à présent:

div {
  border: 1px solid black;
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.component {
  min-height: 300px;
}
.left {
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 100px;
  background-color: lightyellow;
}
.right {
  margin-left: 100px;
  margin-top: -250px;
  margin-right: 50px;
  background-color: lightgreen;
}
<div class="container">
  <div class="component left">

  </div>
  <div class="component right">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed orci scelerisque, scelerisque enim at, ullamcorper ipsum. Cras eget sapien mi. Aliquam ultrices, ligula ut mollis maximus, ligula massa imperdiet libero, at faucibus mauris ante non
      magna. Sed ex lacus, efficitur sit amet neque ut, venenatis hendrerit libero. Suspendisse ornare orci mi. Nulla iaculis egestas libero, eu tincidunt urna tristique et. Quisque nec odio non elit molestie facilisis.
    </p>
    <p>
      Vestibulum scelerisque justo urna, a semper nisi sollicitudin in. Cras congue enim eu euismod semper. Proin consequat gravida felis, quis tincidunt massa pulvinar quis. Morbi nec diam eget orci vestibulum malesuada. Sed volutpat metus eget mattis commodo.
      Nulla facilisi. Praesent lectus mauris, consequat eu varius vitae, cursus vitae leo. Vivamus sagittis lacinia tortor eu ullamcorper. Integer eget velit magna. Duis vestibulum molestie posuere.
    </p>

  </div>
</div>
htmlcssflexboxflex-direction
11
Andrei V

La fonction de colonnes flexibles de hauteur égale - qui est le résultat de align-items: stretch, paramètre par défaut d'un conteneur flexible - s'applique uniquement aux éléments flexibles sur la même ligne.

Cela ne fonctionne pas pour les articles dans un conteneur flexible multi-lignes. Ce comportement est défini dans la spécification:

6. Lignes flexibles

Dans un conteneur flex multi-lignes (même avec une seule ligne), la taille croisée de chaque ligne est la taille minimale nécessaire pour contenir les éléments flex sur la ligne (après l'alignement en raison de align-self), et les lignes sont alignées dans le conteneur flexible avec le align-content propriété.

En d'autres termes, lorsqu'il y a plusieurs lignes dans un conteneur flexible basé sur des lignes, la hauteur de chaque ligne (la "taille croisée") est la "taille minimale nécessaire pour contenir les éléments flexibles sur la ligne ".

De plus, parce que align-items: stretch fonctionne le long de l'axe transversal, la fonction de colonnes de hauteur égale est inutile dans flex-direction: column, où l'axe transversal est horizontal.

Pour obtenir des colonnes/lignes de hauteur égale sur plusieurs lignes, envisagez une solution Javascript.

Cependant, sans en savoir beaucoup sur votre objectif global, voici un moyen simple d'atteindre des lignes de hauteur égale dans votre mise en page actuelle:

Ajoutez du contenu en double dans les deux divisions. Dans le .component.left div, utilisez visibility: hidden.

Violon révisé

5
Michael_B

Vous pouvez simplement envelopper ces colonnes flexbox dans une autre flexbox c'est une ligne, il n'y a aucune raison pour que les éléments ne soient pas à la fois des flexbox et des éléments flex).

<div id="container">
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
  <div class="col">
    <a href="">asdf</a>
    <a href="">asdf</a>
    <a href="">asdf</a>
  </div>
</div>

#container {
  display: flex;
}

#container .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: grey;
}

https://jsfiddle.net/1dp87bm2/1/

2
JackHasaKeyboard