笔记应用开发：如何在指定宽度容器内每行固定展示3-4个卡片并换行

实现方案（纯CSS修改，无需改动HTML，适合新手） #

你只需要修改原CSS中.notes、.cards、.card三个选择器的属性即可，核心用flex布局的自动换行特性实现需求，修改后每行可以稳定显示3-4个卡片，超出自动换行：

操作步骤

把你原来CSS里的这三段代码：

.notes {
  background-color: rgb(221, 169, 101);
  width: 50%;
  margin: auto;
  margin-top: 15px;
}

.cards {
  display: flex;
}

.cards .card {
  width: 300px;
  margin: 2px;
  border: 2px solid black;
  padding: 5px;
}

直接替换为下面的代码即可：

.notes {
  background-color: rgb(221, 169, 101);
  width: 90%; /* 加宽笔记容器，给卡片留足够的显示空间 */
  margin: 15px auto;
  padding: 10px; /* 加内边距避免卡片贴边，视觉更美观 */
}

.cards {
  display: flex;
  flex-wrap: wrap; /* 核心属性：超出容器宽度的卡片自动换到下一行 */
  gap: 15px; /* 统一控制卡片之间的间距，比单独设置margin更省心 */
  justify-content: flex-start; /* 卡片从左到右排列，最后一行不足3/4个也靠左对齐 */
}

.cards .card {
  box-sizing: border-box; /* 关键属性：让border和padding算在设置的宽度里，不会撑大卡片导致排版错乱 */
  width: calc((100% - 30px)/3); /* 每行放3个，减去2个间隙的总宽度后平分容器宽度 */
  border: 2px solid black;
  padding: 8px;
}

自定义调整方法

如果你想要每行放4个卡片，只需要把.cards .card里的width属性改成calc((100% - 45px)/4)即可，数值可以根据你想要的间距大小灵活微调。

内容的提问来源于stack exchange，提问作者MANISH KESHRI