I am trying to use flexbox to layout my 5 pics in the following configuration, 3 at the top and 2 at the bottom with a container of width of 1000px. this is my html code:
<div class="centered-text">
<h2>Tea of the Month</h2>
<p>What´s Steeping at The Tea Cozy?</p>
</div>
<div class="middle-content2">
<figure id="fall">
<img src="/images/img-berryblitz.webp" alt="fall">
<figcaption id="berry">Fall Berry Blitz Tea</figcaption>
</figure>
<figure id="spiced">
<img src="/images/img-spiced-rum.webp" alt="spice">
<figcaption id="rum">Spiced Rum Tea</figcaption>
</figure>
<figure id="seasonal">
<img src="/images/img-donut.webp" alt="seasonal">
<figcaption id="donut">Seasonal Donuts</figcaption>
</figure>
<figure id="myrtle">
<img src="/images/img-myrtle-ave.webp" alt="myrtle">
<figcaption id="ave">Myrtle Ave Tea</figcaption>
</figure>
<figure id="bedford">
<img src="/images/img-bedford-bizarre.webp" alt="bedford">
<figcaption id="bizarre">Bedford Bizarre Tea</figcaption>
</figure>
</div>
</div>
this is my css code:
.middle-content2 {
background-color: #000;
width: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/*
#fall #spiced #seasonal #myrtle #bedford {
width: 300px;
height: 200px;
}
*/
#fall {
width: 300px;
height: 200px;
background-size: cover;
}
any hints please