J'ai un problème. lors de l'utilisation de la marge à l'intérieur d'une flexbox, elle a le double de la taille de ce qu'elle devrait être (comme si elle ne heurte pas ou plus)
C'est là que j'ai le problème: jsfiddle Voici le code:
<div style="height: 350px;"> <div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;"> <div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div> <div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div> <div style="margin: 5px; height: 87.5px; width: 80px; background-color: brown;"></div> </div> <div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div> <div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div> <div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div> <div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div> </div>
Quelle en est la raison? Et comment puis-je faire en sorte que la marge se comporte de la même manière sur le conteneur flexible et en dehors?
3 Réponses :
Pourquoi se comporte-t-il de cette façon?
La réduction des marges fonctionne dans le contexte de formatage de bloc et pas dans le contexte de mise en forme flex .
Ici se trouve @Michael_B La réponse de expliquant la raison derrière cela.
Comment obtenir une marge réductible?
Une façon consiste à envelopper les 3 blocs div avec un div. Il pourrait y avoir un meilleur moyen, mais vous pouvez essayer de partager ici.
Cela ne double pas la taille à l'intérieur de la flexbox. Dans flexbox, la marge est considérée comme du div supérieur ainsi que de div
max (upper div margin, lower div margin ).
mais en dehors de la flexbox, la marge est considérée comme
i.e. total margin = upper div margin + lower div margin
Ce phénomène s'appelle Réduire la marge .
Les marges supérieure et inférieure des éléments sont parfois regroupées en une seule marge qui est égale à la plus grande des deux marges. Cela ne se produit pas sur les marges gauche et droite! Seulement les marges du haut et du bas!
Grâce à votre réponse, j'ai arrêté d'essayer de réparer ce qui avait et de le changer. a publié une solution à laquelle je suis arrivé.
Merci pour les réponses! J'ai beaucoup appris!
La solution simple à laquelle je suis arrivé est d'utiliser: margin: 0px 5px 5px 5px;
Je ne sais pas pourquoi je n'ai pas proposé cela plus tôt.
Vous pouvez voir que cela fonctionne maintenant ici
<div style="height: 350px;"> <div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;"> <div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div> <div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div> <div style="margin: 0px 5px 5px 5px; height: 87.5px; width: 80px; background-color: brown; display: inline-block;"></div> </div> <div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div> <div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div> <div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div> <div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div> </div>
réponse courte: vous ne pouvez pas. Vous êtes confronté à un effondrement des marges et cette fonctionnalité est désactivée dans un contexte de flexbox. Désactivez la réduction de la marge à l'extérieur (utilisez inline-bock par exemple) ou modifiez la marge pour qu'elle soit la même