代码之家 › 专栏 › 技术社区 › Shay Ribera

中型设备中的非响应型flexbox

flexbox css3 css html

Shay Ribera · 技术社区 · 6 年前

我是一名实习生,作为训练的一部分,我不得不做一个弹性的格子设计,每个项目都有一个中心图像。但我的flex产品不会在中型设备上占据一席之地,我也不知道为什么。在dev工具中,当我检查iPad和iPad pro(以及其他媒体设备)的响应性时,这些项不会覆盖页面。如果有人能找到我的错误,我会很高兴知道是什么。(欢迎所有建设性的批评,并提前感谢)

screen shot of what happens

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>