J'ai un problème avec essayer de rendre les articles dans un conteneur prenant l'espace comme je le souhaite. Le problème principal semble être que la boîte à flex et la grille CSS sont formées à des modifications de la largeur et non de la hauteur, où j'ai besoin du comportement opposé. C'est fondamentalement ce que je veux que mes éléments font
Vérifiez l'effet souhaité ici . p>
J'ai essayé d'utiliser des deux boîtes flexibles et une grille CSS. Ceci est mon code actuel, contenant également des résidus de ma tentative précédente. Cela rend simplement l'affichage des images dans leur taille réelle. La hauteur du récipient multimédia est modifiée via JavaScript. P>
p>
<div class="media-container"> <img class="display-img" src="assets/projects/feierlichkeiten/23.png"></img> <img class="display-img" src="assets/projects/feierlichkeiten/22.png"></img> <img class="display-img" src="assets/projects/feierlichkeiten/21.png"></img> <img class="display-img" src="assets/projects/feierlichkeiten/20.png"></img> <img class="display-img" src="assets/projects/feierlichkeiten/19.png"></img> </div>
3 Réponses :
Votre question ne me semble pas très claire pour moi.
Si vous voulez avoir une rangée d'images, toutes avec leur taille d'origine, tout ce dont vous avez besoin pour le faire, il est appliqué à Flex Alignement (rangée et enveloppement) à Le parent et ajout [Ajout du rapport de format aléatoire images pour prouver qu'elles sont toutes alignées, quelle que soit la taille de toutes vos images ont le même rapport d'aspect, le résultat serait identique à celui de votre exemple image] vérifier le Ce codePen . flex: auto avec marge: auto; aux enfants:
flex: auto , qui correspond à l'équivalent pour flex: 1 1 AUTO (SIGNIFICATION FLEX GROW et Flex Shrink seraient définies sur une, sans culture, pas de réduction et de flexion sur Auto [Taille principale initiale d'un élément flexible]).
Je suis aussi assez confus par votre demande TBH. La capture d'écran que vous avez affichée que vous souhaitez reproduire, est juste un comportement standard avec la grille CSS. Alors peut-être que j'ai mal compris. Voici le CodePen avec des paramètres corrects pour reproduire la capture d'écran que vous avez affichée:
https://codepen.io / des pâtes de pâte / stylo / bgdebqa
sur le conteneur que nous avons défini: qui indique au contenu d'être au minimum de 200px de large, et pour envelopper s'il n'y a pas assez d'espace. et sur les images: Il s'agit d'une excellente ressource de Jen Simmons:
Pour l'effet souhaité, utilisez un conteneur avec un «enfant» de média, où chaque enfant a son contenu. La règle Vous recherchez était le 'Flex-Wrap: wrap ' Vous pouvez jouer avec des valeurs et correspondre plus à vous. et veuillez utiliser WebPack pour les préfixes CSS >
Les images ne sont pas chargées ..Can u plz Ajouter ceci dans CodePen?