如何实现Flex布局下卡片自适应排列且换行后尺寸一致？

我有一个包含奇数个卡片式div（例如3个）的父div，希望全屏状态下卡片横向排列并铺满整个父容器，屏幕缩小时自动堆叠。当前卡片堆叠为列时显示正常，每个卡片都能铺满屏幕；但当第一行显示2个卡片、第二行显示1个时，第三个卡片会占满整行，而非与前两个保持相同尺寸（如图所示）。我希望此时第三个卡片和第二个卡片尺寸一致。

HTML文件：

<div class="outside">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>

CSS文件：

.outside{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
}

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
  flex:1;
}

我尝试调整过CSS的多种设置，但始终未找到这个看似简单问题的简便解决方案。

方法一：调整Flex属性，限制卡片最大宽度 #

修改.item的flex属性，设置固定的基础宽度比例，确保一行能容纳2个卡片时尺寸一致，换行后单个卡片自动占满整行：

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
  /* 关键：设置flex基础宽度为50%减去左右margin总和，同时允许伸缩 */
  flex: 1 1 calc(50% - 32px);
}

原理说明 #

calc(50% - 32px)是因为每个卡片左右各有16px的margin，两个卡片的横向总边距为32px，用50%减去这个值可以让两个卡片刚好填满父容器宽度，不会溢出。当屏幕宽度小于260px*2 + 32px时，min-width:260px会生效，卡片自动换行并占满可用宽度。

方法二：改用CSS Grid布局（更简洁易维护） #

如果可以切换布局方式，CSS Grid能更轻松实现需求，无需复杂的计算：

.outside{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
    display: grid;
    /* 自动适配列数，最小列宽260px，剩余空间均分 */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    /* 卡片间的间距，替代原有的margin */
    gap: 32px;
    /* 保持原有的内边距效果 */
    padding: 16px;
}

.item {
  border: 1px solid blue;
  padding: 20px;
  /* 移除margin，改用grid的gap控制间距 */
}

原理说明 #

repeat(auto-fit, minmax(260px, 1fr))会让Grid容器根据当前宽度自动调整列数：当空间足够时，每行尽可能多放卡片；空间不足时自动换行，单个卡片占满整行。gap属性统一控制卡片间的间距，比margin更易维护。

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