html - 在 CSS 中使用 Flexbox/Grid，使图像在移动设备上堆叠

Question

我正在尝试掌握 CSS3 中的网格布局。我想编写一些 HTML/CSS，使我的 3x1 网格在移动设备上查看时能够堆叠。现在，方 block 只会不断缩小直到变小。我之前已经能够使用移动 CSS，但使用网格对我来说是新的。任何人都可以提供一些指示或建议吗？

这是我的代码:

HTML:

<div class="container"> 

<div class="grid">
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif"> 

  </div>
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif">
  </div>
  <div class="cell">
    <img src="https://www.easycalculation.com/area/images/big-square.gif">
  </div>
</div>

CSS:

.container {
  width: 100%;
  margin: 0 auto;
}

.grid {
  display: flex;         
  flex-wrap: wrap;      
  justify-content: space-around;

}

.cell {
  flex: 0 0 32%;         
  margin-bottom: 5px;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #dedede;
}

这里还有一个 CodePen 链接:https://codepen.io/anfperez/pen/QrEBLZ

Answer 1

试试这个 CSS: (代码笔 https://codepen.io/bonniemellott/pen/ELypzm )

.container {
  width: 100%;
  margin: 0 auto;
}

.grid {
  display: flex;         
  justify-content: space-between;
  flex-wrap: wrap;
}

.cell {
     //removed flex attribute
  margin-bottom: 5px;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: #dedede;
}