本文详解如何使用 CSS Flexbox 实现响应式商品卡片网格布局，确保每行固定显示 5 个卡片、左对齐排列，并在空间不足时自动换行；同时解决因 max-width 和容器缺失导致的垂直堆叠问题。
本文详解如何使用 css flexbox 实现响应式商品卡片网格布局，确保每行固定显示 5 个卡片、左对齐排列，并在空间不足时自动换行；同时解决因 `max-width` 和容器缺失导致的垂直堆叠问题。
要让商品卡片（.nft）从左到右依次排列、每行显示 5 个，并在容器宽度不足时自动折行，核心在于正确设置父容器的 Flex 布局行为，并合理约束子项尺寸。原代码中 .product-card-container 虽启用了 display: flex，但存在两个关键问题：一是未启用 flex-wrap: wrap，导致卡片强制单行溢出或压缩；二是 .nft 使用 max-width: 300px 而非确定性宽度，在 Flex 容器中无法稳定参与等分布局，容易引发高度塌陷或换行异常。
✅ 正确做法如下：
-
父容器启用弹性流与换行
将.product-card-container设置为可换行的 Flex 容器，并采用justify-content: space-around或更推荐的space-between/flex-start（避免首尾间距过大）：
.product-card-container {
display: flex;
flex-wrap: wrap; /* ✅ 允许子项换行 */
justify-content: flex-start; /* 左对齐，避免两侧留白 */
gap: 1rem; /* 推荐使用 gap 替代 margin，更可控 */
padding: 1rem;
}-
子项（
.nft）使用固定宽度 + 响应式降级max-width在 Flex 中不保证实际占用宽度，应改为明确的width，并配合媒体查询适配小屏：
.nft {
width: 300px; /* ✅ 固定宽度，便于计算每行数量 */
margin: 0; /* ⚠️ 移除原 margin: 2rem，改用父容器 gap 控制间距 */
flex-shrink: 0; /* 防止被压缩（重要！） */
}
/* 小屏下每行显示 1–2 个 */
@media (max-width: 768px) {
.nft {
width: calc(50% - 0.5rem); /* 两列布局 */
}
}
@media (max-width: 480px) {
.nft {
width: 100%; /* 单列布局 */
}
}-
HTML 结构必须包裹在容器内
原代码中多个.nft元素是平铺在文档流中的，缺少统一的父容器。务必用<div class="product-card-container"> 包裹所有卡片：<pre class="brush:php;toolbar:false;"><div class="product-card-container"> <div class="nft" onclick="addProd('11', products)"> <div class="main"> <img class="tokenImage" src="{{ url_for('static', filename='img/XXX.jpg') }}" alt="NFT" /> <h2>Корзинка</h2> <p class="description">XXX.</p> </div> </div> <!-- 其余 4 个 .nft 同理 --> </div></pre><p>? <strong>关键注意事项</strong>：</p> <ul> <li>不要给 <code>.nft设置margin（尤其margin: 2rem），它会破坏 Flex 的间隙控制逻辑，优先使用gap； -
flex-shrink: 0是防止卡片在窄屏下被压缩变形的关键声明； - 若需严格保持“始终 5 列”，可结合 CSS
@container查询（现代浏览器）或 JavaScript 动态计算，但常规响应式方案更实用； - 检查是否有全局 CSS 重置或继承样式干扰（如
* { box-sizing: border-box }建议全局添加，避免宽高计算偏差）。
最终效果：在桌面端（≥1500px）自然呈现 5 列卡片，间距均匀；在平板和手机端按断点优雅降级为 2 列或 1 列，完全响应式且无需 JavaScript 干预。
