Center des images avec css

salut a tous
voilà j'ai 1 grande image et au dessous j'en ai 3 autres. je voudrai faire un alignement de mes 3 images qui va prendre toute la largeur de ma première image.

--------------------------------------




-------------------------------------
---------- ---------- ----------

voilà j'ai fait un mini mini exemple.
moi ce que j'ai c'est ca.
----------------------------------------------




----------------------------------------------
---------- ---------- ----------

Salut, tu devrais te renseigner sur les flexbox (:

<div id="container">
    <img alt="" src="image.png">
    <img alt="" src="image.png">
    <img alt="" src="image.png">
</div>

#container {
    width: 100vw /* toute la largeur de ta page */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Bonjour,
justement j'ai utilisé les flex box finalement ca a marché mais quand je rétrécisse la fenetre les images ne descendant pas, en utilisant flex-wrap:wrap;
voila mon code et mon css.

<!-- page modèle article -->
<section>
<div class="content-article">
<div class="content-left">
<div class="image">
<img src="res/image/image1.jpg">
<div class="flex-image">
<img src="res/image/image2.jpg">
<img src="res/image/image3.jpg">
<img src="res/image/image4.jpg">
</div>
</div>
</div>
<div class="content-right">
<h6>Blouse avec liens à nouer</h6>
<!--rajouter un trait-->
<div class="avis">
<ul class="flex-avis">
<li class="envie"> Lire les avis</li>
<li class="envie"> Donner votre avis</li>
<li class="envie"> Listes d'envie </li>
</ul>
</div>

css

.content-article{
display: flex;
flex-direction: row;
}
.content-article{
}
.flex-image{
justify-content:space-around;
}
.content-left{
width: 50%;
background-color: grey;
}
.content-right{
width: 50%;
display: flex;
flex-direction:column;
}

possible de m'aider ?

Tu peux utiliser des media queries :

@media only screen and (max-width: 300px) {
.content-article {
    flex-direction: column;
}

@parsimonhi

top di top ca marche merci beaucoup