Les éléments Flex ne sont pas emballés dans la boîte de dialogue de la direction de la colonne

J'ai un outerWrapper innerWrapper , un outerWrapper innerWrapper et des enfants. outerWrapper a une hauteur de 300px , et display: flex . innerWrapper est également display: flex , et est flex-direction: column .

Lorsque j'ajoute align-items d' align-items avec une valeur de tout sauf une outerWrapper à outerWrapper , les enfants affichent une longue colonne. Ils ignorent la hauteur de 300px . Voici une image de l'affichage:

Entrez la description de l'image ici

Il devrait s'afficher comme ceci:

Entrez la description de l'image ici

Juste avec align-items: flex-end .

Pourquoi cela se produit-il, et comment puis-je utiliser les align-items: flex-end et que les enfants apparaissent comme la deuxième image?

JSFiddle

 #outerWrapper { height: 300px; background-color: lightgreen; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; } ul { padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; } li { list-style-type: none; width: 100px; height: 100px; background-color: lightblue; border: 1px solid; }

 <div id="outerWrapper"> <ul id="innerWrapper"> <li class="child">I'm #01</li> <li class="child">I'm #02</li> <li class="child">I'm #03</li> <li class="child">I'm #04</li> <li class="child">I'm #05</li> </ul> </div>

Mettre à jour

La réponse à cette question est d'ajouter une hauteur de 210px à innerWrapper . Mais je dois accéder à ce numéro à l'aide de JavaScript, car la quantité de boîtes sera dynamique.

J'ai essayé le code suivant:

 innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';

Mais cela ne l'a pas corrigé. Il a juste fait la hauteur: 5 * 102 (5 = nombre de cases, 102 = hauteur + bordure).

Comment puis-je définir la hauteur correcte dans innerWrapper utilisant JavaScript? (Je ne peux pas faire de hauteur: 100% parce que je ne pourrai pas définir les éléments d'alignement: flex-end ou center.)

JSFiddle

 var innerWrapper = document.getElementById('innerWrapper'); var lastChild = innerWrapper.lastElementChild; newHight = lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight; innerWrapper.style.height = newHight + 'px';

 #outerWrapper { height: 300px; background-color: lightgreen; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; } ul { padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; /*height: 206px;*/ } li { list-style-type: none; width: 100px; height: 100px; background-color: lightblue; border: 1px solid; }

 <div id="outerWrapper"> <ul id="innerWrapper"> <li class="child">I'm #01</li> <li class="child">I'm #02</li> <li class="child">I'm #03</li> <li class="child">I'm #04</li> <li class="child">I'm #05</li> </ul> </div>

Vous avez défini une hauteur pour #outerWrapper : height: 300px .

Donnez simplement à l'enfant – #innerWrapper – une hauteur égale: height: 100% . Maintenant, ils s'enveloppent.

Ensuite, si vous voulez que les objets situés au fond du conteneur, utilisez auto marges auto flex sur les éléments impairs.

Utilisez un pseudo-élément invisible pour que le dernier élément de numéro impair s'aligne toujours sur la rangée supérieure.

 #outerWrapper { height: 300px; background-color: lightgreen; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; } ul { padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; height: 100%; /* NEW */ } li { list-style-type: none; width: 100px; height: 100px; background-color: lightblue; border: 1px solid; } li:nth-child(odd) { margin-top: auto; } /* NEW */ ul::after { content: ""; /* NEW */ width: 100px; /* NEW */ height: 100px; /* NEW */ border: 1px solid; /* NEW */ visibility: hidden; /* NEW */ }

 <div id="outerWrapper"> <ul id="innerWrapper"> <li class="child">I'm #01</li> <li class="child">I'm #02</li> <li class="child">I'm #03</li> <li class="child">I'm #04</li> <li class="child">I'm #05</li> </ul> </div>

Essayez d'ajouter la height du conteneur Flexbox:

 ul { ... height: 100%; }

Étant donné que l'élément outerWrapper et l'élément de menu ont un positionnement flex , vous devrez également effectuer des ajustements aux dimensions et à l'alignement des éléments du menu. Voici un violon mis à jour avec le comportement que vous recherchez / correspond à la seconde image:

https://jsfiddle.net/wtyqo1su/1/

 #outerWrapper { width: 100%; height: 300px; background-color: lightgreen; display: flex; justify-content: center; align-items: center; } ul { height: 250px; width: 300px; padding: 0; margin: 0; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; } li { list-style-type: none; width: 100px; height: 100px; background-color: lightblue; border: 1px solid; }

J'ai restreint l' ul à une largeur / hauteur spécifique (de sorte que les enfants s'enrouleront comme prévu). Faites moi savoir si vous avez des questions!