Je me sens stupide de ne pas pouvoir le comprendre, mais pour une raison quelconque, je ne peux pas rendre ces divs à rester dans une ligne. Je m'attends à ce qu'ils soient à côté les uns des autres en une seule ligne, car ils ont tous les deux la moitié des divs parents Voici mon code P> p> largeur code> tout en conservant flex wrap code> au cas où je suis ajouté plus de divs.
<aside class="aside">
<div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
</div>
<div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>
</aside>
4 Réponses :
Essayez ceci, vous devez ajouter flex-direction sur les enfants et supprimer flex-flow :
Alors que cela fonctionne, je suis sûr que flex-direction doit être placé dans la même classe que l'affichage : flex , une idée de la raison pour laquelle cela le ferait fonctionner?
@amjay ne semble pas avoir d'importance: Stackoverflow.com/a/37844240/4194436 Je le fais toujours comme ça.
flex-direction s'applique uniquement aux conteneurs Flex. Cela ne fait rien quand appliqué aux enfants.
Parce que vous avez supprimé flex-flow à partir du conteneur, qui activé envelopper . La valeur par défaut est Nowrap .
Vous pouvez résoudre ce problème en ajoutant Flex: 1 à l'enfant
p>
<aside class="aside">
<div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean luctus pulvinar risus ut congue. Duis eu metus eros.
</div>
<div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div>
</aside>Merci, peut-être avoir une idée de la raison pour laquelle cela ne fonctionne pas dans mon exemple?
La marge sur les éléments provoque la dépassement de vos articles de 50%. Si vous le réduisez à quelque chose comme 40%, cela fonctionnera bien. Alternativement, vous pouvez retirer votre marge.
p>
<aside class="aside"> <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros. </div> <div class="aside__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus pulvinar risus ut congue. Duis eu metus eros.</div> </aside>
Bien que cela fonctionne, la largeur des articles, y compris margins correspond exactement à 50% des parents et de la margins ne pas dépasser la largeur En raison de Box-SIGING: BORD-BOX et ceci peut être observé dans des styles calculés des éléments, quelle que soit l'idée.
@Amjay Butter-Box inclut uniquement le remplissage et la largeur de la largeur des calculs de hauteur / largeur non pas la marge elle-même.
Il y a des défauts de navigateurs qui provoquent les éléments d'avoir des marges. Définissez la marge de l'élément pour être https: //jsfiddle.net/nyx9doba/ Je recommande d'utiliser quelque chose comme Normaliser pour réinitialiser toutes les valeurs par défaut du navigateur pour vous donner un meilleur contrôle sur vos éléments: https://necolas.github.io/normalize.css/ Mise à jour : Pour conserver la marge, vous devez réduire votre largeur pour être 50% moins la marge: 0
Merci, mais cela ne résout pas mon problème parce que je veux que l'enfant divs ait margins
Pas un problème, mais c'est la base du problème réel, car votre mis de côté_items dépasse 50% (largeur + marge). Si vous souhaitez conserver la marge, vous aurez besoin de votre largeur inférieure à 50%. Je vais ajouter l'exemple ci-dessus.
Cela semble être juste, lisez également votre autre commentaire que j'ai été convaincu de ce point que margins est également inclus dans dimensionnement de la boîte , merci. Aussi ce qui m'a confondu, c'est que les largeurs Calculées de l'enfant divs étaient exactement 50% de parent div div
@AMJay Yea Je peux voir pourquoi - Flex + largeur a des comportements intéressants de sorte que ce n'est pas toujours précis.