web-dev-qa-db-fra.com

Comment désactiver les colonnes de hauteur égale dans Flexbox?

J'ai trois éléments que j'essaie d'aligner dans ma mise en page.

Tout d'abord, j'ai un div pour les commentaires, puis une entrée de recherche, puis un élément div pour les suggestions.

Je veux que le premier et le dernier élément aient une largeur de 20% et que l'entrée de recherche ait une largeur de 60%. En utilisant Flexbox j'obtiens ce que je veux.

Mais il existe une fonctionnalité qui fait passer toutes les divs à l'élément le plus élevé . Cela signifie que lorsque les résultats de la recherche s'affichent, les éléments de rétroaction et de suggestion augmentent en hauteur avec la div de recherche, ce qui entraîne une mise en page foireuse.

Y a-t-il une astuce pour ne pas augmenter les divs avec l'élément le plus élevé? Faites juste les divs (#feedback et #suggestions) ont la hauteur du contenu en eux?

#container_add_movies {
  display: flex;
}
#container_add_movies #feedback {
  width: 20%;
  background-color: green;
}
#container_add_movies #search {
  width: 60%;
  background-color: red;
}
#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>
    Feedback
  </div>
  <div id='search'>
    Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>Search
    <br>
  </div>
  <div id='suggestions'>
    Suggestions
  </div>
</div>

http://codepen.io/alucardu/pen/PPjRzY

htmlcsscss3flexbox
42
Peter Boomsma

Vous rencontrez la fonctionnalité de colonnes flexibles de hauteur égale.

Un paramètre initial d'un conteneur flexible est align-items: stretch.

Cela signifie que les articles flexibles étendent automatiquement toute la longueur de l'axe transversal du conteneur. Dans un conteneur de direction de ligne, l'axe transversal est vertical (hauteur).

L'élément le plus haut définit la hauteur pour tous les frères et sœurs. À mesure que l'élément le plus grand se développe, ses frères et sœurs suivent. Par conséquent, une hauteur égale pour tous les articles.

Pour remplacer ce paramètre par défaut, ajoutez align-items: flex-start vers le conteneur flexible:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

... ou align-self: flex-start aux éléments flex:

#feedback {
    align-self: flex-start;
    width: 20%;
    background-color: green;
}

 #suggestions {
    align-self: flex-start; 
    width: 20%;
    background-color: yellow;
}

#container_add_movies {
  display: flex;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#feedback {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: green;
}

#suggestions {
  align-self: flex-start;  /* NEW */
  width: 20%;
  background-color: yellow;
}
<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

align-items définit la valeur par défaut de align-self. Avec align-self vous pouvez remplacer la valeur par défaut sur des éléments individuels.

Plus de détails dans les spécifications:

8.3. Alignement transversal: le align-items et align-self propriétés

Les éléments flexibles peuvent être alignés dans l'axe transversal de la ligne actuelle du conteneur flexible, comme justify-content mais dans la direction perpendiculaire.

align-items définit l'alignement par défaut pour tous les éléments du conteneur flexible, y compris les éléments flexibles anonymes.

align-self permet de remplacer cet alignement par défaut pour les éléments flex individuels.

Un peu d'histoire

Depuis les débuts de CSS, deux défis de mise en page ont régulièrement frustré, perplexe et ennuyé les développeurs frontaux:

  1. Comment centrer les choses, en particulier verticalement, et
  2. Comment créer des colonnes de hauteur égale (tables de côté)

Aujourd'hui, avec l'avènement de la flexbox, ces problèmes sont terminés.

Centrer les choses n'a jamais été aussi simple:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

Simple. Facile. Efficace. La folie est finie .

En termes de colonnes de hauteur égale, flexbox excelle également: il le fait par défaut.

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

Le align-items: stretch la règle indique aux éléments flexibles de se développer le long de l'axe transversal autant que possible. Par conséquent, dans un conteneur de direction de ligne, tous les éléments peuvent être de hauteur égale. Plus de folie apprivoisée par flexbox .

À partir d'un réponse populaire pour les colonnes de hauteur égale :

Donner overflow: hidden au conteneur et une grande marge négative (et égale) et un remplissage positif aux colonnes. Notez que cette méthode a quelques problèmes, par exemple les liens d'ancrage ne fonctionneront pas dans votre mise en page.

Voilà un hack!

Le pendule commence maintenant à osciller dans l'autre sens: Les concepteurs demandent comment désactiver les colonnes de hauteur égale.

83
Michael_B

Vous pouvez ajouter align-items: flex-start à ton #container_add_movies. Voici un exemple

13
Sergey Tyupaev

Définition de l'élément enfant à l'origine du problème sur flex:none a fait l'affaire pour moi.

0
Cozmoz