How to make flex spacing depend on window width?-CodePudding

I'm using flex spacing to make my figures be spaced equally, but when I shrink window they go beyong parent section.

HTML part:

        <section >
        <figure>
            <img src="Images/Vanilla-Cupcakes.jpg" alt="Homemade Vanilla Cupcakes">
            <figcaption>Homemade Cupcakes</figcaption>
        </figure>
        <figure>
            <img src="Images/mini-cinnamon-rolls.jpg" alt="Sweet Cinnamon Rolls">
            <figcaption>Cinnamon Rolls</figcaption>
        </figure>
        <figure>
            <img src="Images/christmas-bread.jpg" alt="Christmas Sweat Bread">
            <figcaption>Christmas Desserts</figcaption>
        </figure>
    </section>

CSS part:

.features {
background: bisque;
color: white;    
padding: 20px;
display: flex;
justify-content: center;
flex-direction: row;
}
.features figure {
color: white;
font-size: 30px;
text-align: center;
width: 350px;
}
.features figure img{
border-radius: 10px;
width: 350px;
}

CodePudding user response：

Try:

.features { flex-wrap: wrap }

It wraps the content when there is not enough space.

CodePudding user response：

This is because the text is too big at one point. You could either try to create a fluid font-size or try to break the text with the word-break css property. I also would recommend not to use fixed widths inside your flex items (350px)