中型设备中的无响应Flexbox

Question

我是一名实习生，作为培训活动的一部分，我必须制作一个弹性框检查器设计，并在每个项目中居中放置图像。但是我的弹性项目无法在中型设备上显示，我也不知道为什么。在开发工具中，当我在iPad和iPad Pro（及其他中型设备）上检查响应速度时，这些项目不会覆盖该页面。如果有人发现我的错误，我将不胜感激。 （欢迎所有建设性的批评，并在此先感谢您

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.list-container {
  display: flex;
  flex 1;
  flex-wrap: wrap;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  width: 25%;
  height: auto;
  padding: 15px;
  flex: 1 1 auto;
}

.flex-item {
  background: purple;
  width: 33.33%;
  display: flex;
  justify-content: center;
  /* this centers the images to the center*/
  align-items: center;
}


/*  this sets all even indexed boxes to background purple*/

.flex-item:nth-child(even) {
  background: #8000f2;
}


/*  this overwrites the purple default background of the flex items for special even cases*/

.flex-item:nth-child(even) {
  background: #ffffff;
}

footer {
  background-color: #e2e2e2;
  min-height: 160px;
  padding: 20px;
}


/* super small devices */

@media only screen and (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item {
    width: 101.33%;
  }
}

<div class="flex-container">
  <div class="list-container">
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
    <div class="flex-item">
      <img src="scrolltop.png"></img>
    </div>
  </div>
  <footer></footer>
</div>