0
votes

Comment mettre l'image correctement dans le conteneur Flex

<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <img src="crack.svg">
     </div>

2 commentaires

Voulez-vous que l'IMG inside Nth-enfant (3) ?


non. Je veux une autre boîte. Vous pouvez voir en code HTML


3 Réponses :


0
votes

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>


0 commentaires

0
votes

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>


0 commentaires

0
votes

Voici 3 façons de positionner image

Les 2 premières manières doivent changer HTML car vous utilisez flex code> p>

Le dernier est de positionner l'IMG P>

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>


0 commentaires