I am display a cart page with the products stacked in rows , it display just fine but i am having a hard time figuring out how to spread them evenly with all of its space.

enter image description here

I am using bootstrap

here is the html snippet

 <div class="container cart-container">
            <asp:Repeater ID="rptCart" runat="server">
                <ItemTemplate>
                     <div class="cart-product-container d-flex">
                         <img onerror="this.onerror=null; this.src='../../include/Images/No-Image-Placeholder.png';" src='<%# string.IsNullOrEmpty(Eval("ImagePath").ToString()) ? "../../include/Images/No-Image-Placeholder.png" : "../" + Eval("ImagePath") %>' class="cart-image"/>
                         <div class=" ms-5 d-flex flex-column justify-content-center">
                             <h3 class="text-secondary">Category</h3>
                             <h4><%# Eval("Name") %></h4>
                         </div>          
                             <div class="d-flex justify-content-around flex-grow-1">
                               input class="align-self-center" min="1" type="number" value='<%# Eval("Quantity") %>' />
                             <div class="d-flex align-content-center">
                                 <span class="align-self-center me-2 text-black"><strong><%# Eval("Currency") %></strong></span>
                                 <span class="align-self-center" ><strong><%# Eval("Price") %></strong></span>
                             </div>
                         <button  class="btn btn-danger align-self-center">
                             <span>X</span>
                         </button>
                             </div>
                     </div>
                <hr />
                </ItemTemplate>
            </asp:Repeater>
        </div>

any hints or help will be greatly appreciated.

I’ve tried a lot of flex property but i can’t seem to figure out what to properly use.