so i'm making a e-commerce page with flexbox, everything seems fine, even the childs of my parent flex container .catalog, but when i need to set the justify-content: space-between on my child .cards, doesnt work, but justify center, top, bottom works, i dont know
here my html code
<div class="catalog"><a class="cards" href="/products/1"><div><h1>Nvidia GTX 1080 ti Founders Edition</h1><img src="https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png" alt=""/><h2>precio: $120.000</h2></div></a><a class="cards" href="/products/2"><div><h1>Ryzen 5 5600x</h1><img src="/pngs/ryzen5.png" alt="" /><h2>precio: $85.961</h2></div></a><a class="cards" href="/products/3"><div><h1>Redragon Cobra Chroma M711 White</h1><img src="/pngs/redragon.webp" alt="" /><h2>precio: $20.000</h2></div></a></div>
here my css code
.cards { width: 280px; padding: 10px; text-align: center; background: #101010; font-size: 10px; display: flex; align-items: center; flex-wrap: nowrap; flex-direction: column; justify-content: space-between;}.cards img{ max-width: 200px;}.cards:hover{ transform: scale(1.03); transition: 0.04s; box-shadow: 0px 0px 36px -25px rgba(255,255,255,1);}.catalog { display: flex; float: inline-end; flex-direction: row; flex-wrap: wrap; gap: 15px; width: calc(100% - 280px); justify-content: center;}I expect the price to be positioned at the bottom, the image to be centered, and the title to be at the top. I can achieve this effect with space-between
Any response will be received