css 宽度大于1200px一行3列，小于1200px一行两列

html内容

<div class="container ">
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
  <div class="cards"></div>
</div>

css样式

/* 设置默认情况下每行展示3个元素 */
.container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: ; */
   }
   .cards{
     width:calc(33% - 20px);
     height: 320px;
     margin-top:20px;
       border:1px soild #000;
   }
   /* 当页面缩小到特定尺寸时，每行展示2个元素 */
   @media (max-width: 1400px) {
    .container {
      flex-wrap: wrap;
      /* justify-content: space-between; */
    }
    .cards{
    border:1px soild #000;
     width:calc(49% - 20px);
     height: 320px;
     margin-bottom:40px;
    }
   }