Flexbox for creating product cards for coffee shop assignment

HTML-CSS
1

Hello, I’m a student learning to build a coffee shop for a school assignment.

I’m currently working on building the product cards using flexbox. I have one issue though, I cannot figure out how to set up the flexbox to create the desired outcome.

Desired Outcome

Screen Shot 2024-04-23 at 1.48.58 PM
Screen Shot 2024-04-23 at 1.48.58 PM632×1298 140 KB

What I have right now

In separate reply.

I’m not sure how to align the calories and price boxes the way I want them to. I want them to be half of the width of the big card then placed side by side like in the desired outcome.

HTML

<!--Product Cards-->
    <main>
        <!--Strawberry Latte Card-->
        <div class="card">
            <div class="card-img">
                <img src="img/strawberry-latte.png" alt="">
            </div>
        </div>
        <div class="card-title-container"><p class="card-title">Strawberry Latte</p></div>
        <div class="card-desc-container">
            <p class="card-desc">Indulge in a ltte made with velvety steamed milk and infused organic strawberries.</p>
        </div>
        <div class="stats">
            <div class="calories-container"><p>200 calories</p></div>
            <div class="price-container"><p class="price">$3.99</p></div>
        </div>
        <div class="qty">
            <p>-</p>
            <p>1</p>
            <p>+</p>
        </div>
        <a href="" class="card-btn">ADD TO CART</a>

CSS

main {
    margin-top: 50px;
    margin-bottom: 50px;
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: center;
}

.card-img {
    border: 1px solid #6A281F;
    padding: 60px;
    margin-right: auto;
    margin-left: auto;
}

div.card-title-container {
    border: 1px solid #6A281F;
    width: 100%;
    font-style: italic;
    font-family: giulia, sans-serif;
    font-size:larger;
    font-weight: lighter;
}

.card-desc-container {
    border: 1px solid #6A281F;
}

div.stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 50%;
    margin: 0px auto;
    justify-content: center;

}

Please let me know what I can do. Thank you.

2

Screen Shot 2024-04-23 at 1.49.52 PM
Screen Shot 2024-04-23 at 1.49.52 PM1084×1948 79.5 KB

3

The code is a little incomplete right now to really tell. I would suggest you add the outer container and think about the borders as that might affect the layout decisions.

Using flex: 1 on each of the two flex items might work.

Using space-around for justify-content on the flex container might work.

gap and padding might as well.

1 Like
4

Thank you so much. There was an error in my html, apparently none of my card content was nested in the card div which was affecting things…

I also implemented flex: 1 and justify content: space-around into my code and I’ve gotten the desired result! Thank you again.

Edit: May I also please know what flex: 1 does in this case? I noticed it aligned the items just perfect the way I want, what is it doing exactly?

5

It is the shorthand for flex-grow, flex-shrink, flex-basis.

flex: 1 is the same grow 1, shrink 1, basis 0% (default is 0 1 auto).

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.