将桌面布局转换为单列移动布局

Question

我已经创建了一个完整的网站，但删除了所有的填充内容，只剩下三列div。我的目标是在图像被重新调整大小时，让这三列垂直堆叠。

额外的CSS已包含在内，因为它与整个网站一起使用，所以我都包括了。

我尝试查找某些媒体查询并试图理解 flexbox。任何帮助将不胜感激。

  * {
  border: 1px solid red;
  /*For layout purposes only*/
}

* {
  max-width: 980px;
  font-family: 'Lato', sans-serif;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0px;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.row {
  width: 100%;
  display: flex;
}

.img {
  display: block;
  margin: auto;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {

<header class="container">
  <div class="row">
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
    <div class="col-4">
      <img class="img" src="http://placehold.it/300x300">
    </div>
  </div>
</header>

- Austan

---

不要使用“margin: 0 auto”，而要使用“float: left”。当屏幕变窄时，它应该堆叠。 - Mugé

Answer 1

一个 flex 容器的初始设置是 flex-direction: row。这意味着容器的子元素（"flex 项目"）将水平对齐，就像您的代码中一样。

要垂直堆叠项目，请切换到 flex-direction: column。

.row {
    display: flex;
    flex-direction: column; /* NEW */
}

如果您希望在调整大小时使flex项垂直堆叠，请在媒体查询中更改flex-direction：

@media screen and ( max-width: 500px ) { 
     .row { flex-direction: column; }
   }

jsFiddle演示

- Michael Benjamin

---

你懂的，最后一件事。当屏幕尺寸缩小时，我遇到了居中div的问题。它们现在堆叠在一起，但是由于某种原因，图像似乎向右浮动，但我的链接是居中的。而且，当我尝试通过调整内容来使其居中时，它不具有响应性。 - Austan

问题出在.col-4的width: 33.33%，即使媒体查询触发后仍然存在。通过在媒体查询中将规则调整为width: 100%，问题似乎已经解决了。http://jsfiddle.net/nkc1wqhn/1/ - Michael Benjamin