<div class = "container"> <div class = "item"> </div> <div class = "item"> </div> <div class = "item"> </div> <img src="crack.svg"> </div>
3 Réponses :
Si vous souhaitez mettre l'image sous les éléments Flex, enveloppez votre .Container code> à l'intérieur d'un conteneur parent et placez l'image là-bas. Actuellement, FLEX serrera l'image dans la même ligne que les éléments.
<div class="parent-container">
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<img src="crack.svg">
</div>
Vous pouvez définir flex-base code> avec le pourcentage pour chaque élément, effectuez les 3 premiers 100% au total et ajoutez
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<img src="https://svgshare.com/i/AFb.svg">
</div>
Voici 3 façons de positionner image
Les 2 premières manières doivent changer HTML car vous utilisez Le dernier est de positionner l'IMG P> p> flex code> p>
<h1>image after container</h1>
<div class = "container">
<div class = "item">
</div>
<div class = "item">
</div>
<div class = "item">
</div>
</div>
<img src="crack.svg">
<h1>image inside nth-child(3)</h1>
<div class = "container">
<div class = "item">
</div>
<div class = "item">
</div>
<div class = "item">
<img src="crack.svg">
</div>
</div>
<h1>image inside nth-child(3) with css and not change html</h1>
<div class = "container">
<div class = "item">
</div>
<div class = "item">
</div>
<div class = "item">
</div>
<img src="crack.svg" class="img">
</div>
Voulez-vous que l'IMG inside
Nth-enfant (3) code>?
non. Je veux une autre boîte. Vous pouvez voir
en code HTML