Flexbox 3 столбца 1 строка не работает должным образом ⇐ CSS

[Anonymous]

Привет всем, я работал над торговой страницей, я настроил все с помощью flexbox, когда я показываю более 4 элементов на странице, все работает нормально, но когда я показываю только 3 элемента или меньше, flexbox делает странные вещи

вот видео-демонстрация (не знаю, как объяснить):
вот код:

Код: Выделить всё

.cards {
width: 300px;
padding: 10px;
text-align: center;
background: black;
font-size: 10px;
display: flex;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
}
.catalog {
display: flex;
float: inline-end;
flex-direction: row;
flex-wrap: wrap;
gap: 15px;
max-width: 80%;
}
.sidebar {
display: inline-flex;
max-width: min-content;
top: 135px;
margin-top: 0;
font-size: 12px;
background-color: rgb(35 35 35);
height: 100%;
padding-left: 10px;
padding-right: 20px;
margin-top: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}

html-код:

Код: Выделить всё

[url=/products/sortby/Placas de video]Placas de videoProcesadoresPerifericosCelularesMemorias RAMMotherboardsMonitoresAlmacenamiento[/url]


Nvidia GTX 1080 ti Founders Edition
[img]https://asset.msi.com/resize/image/global/product/product_7_20171122181017_5a154d0982c95.png62405b38c58fe0f07fcef2367d8a9ba1/1024.png[/img]
          alt=""
/>
precio: $120.000
[url=/products/1]Ver mas[/url]

Ryzen 5 5600x
[img]/pngs/ryzen5.png[/img]
precio: $85.961
[url=/products/2]Ver mas[/url]

Redragon Cobra Chroma M711 White
[img]/pngs/redragon.webp[/img]
precio: $20.000
[url=/products/3]Ver mas[/url]

Samsung Galaxy J2 Prime 16 GB
[img]https://images.samsung.com/is/image/samsung/ph-galaxy-j2-prime-lte-sm-g532gzddxtc-thumb-Gold-61436996?480_480_PNG[/img]
          alt=""
/>
precio: $31.000
[url=/products/4]Ver mas[/url]

Intel Core I9 9900K 5Ghz
[img]https://unitytech.uy/wp-content/uploads/2020/04/i9.png[/img]
          alt=""
/>
precio: $85.000
[url=/products/5]Ver mas[/url]


Memoria Ram DDR4 16GB (2X8) Corsair Vengeance Pro RGB White 3200MHz

[img]https://assets.corsair.com/image/upload/f_auto,q_auto/v1/akamai/pdp/vengeance-rgb-pro/Content/Vengeance_RGB_Pro_PDP_White_04.png[/img]
          alt=""
/>
precio: $55.000
[url=/products/6]Ver mas[/url]

ASUS ROG STRIX Z590-E GAMING WIFI
[img]https://dlcdnwebimgs.asus.com/files/media/B7CBA71A-2549-4C30-843E-15189BB8E78D/V1/img/z590/kv/hero.png[/img]
          alt=""
/>
precio: $120.000
[url=/products/7]Ver mas[/url]

и если вам нужен jsfiddle: https://jsfiddle.net/n284cka0/
Я не знаю, что я здесь делаю не так
Спасибо!< /п>

Подробнее здесь: https://stackoverflow.com/questions/792 ... s-expected