Css Flex网格未调整@media查询的大小

我不明白为什么在使用@media查询时，我的4列（flexbox）网格没有调整大小。我的代码在这里：

为了更改布局，我一直在使用以下代码，但布局保持完全相同。我想要平板电脑/iPad的2列布局和智能手机的1列布局：

/* iPad portrait */
@media  screen and (min-width: 641px) and (max-width: 959px) {
  .col_3 { width: 48.5%; }
}

/* Smartphones */
@media  screen and (max-width : 480px), /* Portrait */
            screen and (max-width : 640px) /* Landscape */ {

  .col_3 { width: 100%; margin-right:0; }

}

---

请将flex wrap属性添加到

.row

类中

.row {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap:wrap;
        clear: both;
        margin: 0 auto;
        max-width: 100%;
        height: 100%;
        padding: 0;
    }

---

请参阅flex Box的完整指南。

考虑将

flex wrap:wrap

添加到您的flex容器（

.row

）。flex容器的默认设置为

flex wrap:nowrap

，所有flex项目将保持在同一行

flex wrap

属性控制flex容器是否为 单线或多线，以及横轴的方向 确定新线的堆叠方向

nowrap（初始值）

flex容器是单行的

包裹

flex容器是多行的

资料来源：

---

另外，您正在flex容器中使用

float

和

clear

属性。请注意，这些属性将被忽略，可以安全删除

flex容器为其建立一个新的flex格式上下文 它的内容。这与建立块格式相同 上下文，但使用flex布局代替块布局： 浮动不会侵入flex容器，flex 容器的边距不会与其内容的边距一起折叠

• float

  和

  clear

  对弹性项目没有影响，并且不会使其退出流动

资料来源：

---

完美的我以为我错过了一条简单的班轮。flex box有太多的小调整，我只是还没有跟上。谢谢你的解释。对于这个网站上你觉得有用的答案。没有义务。这只是推广高质量内容的一种方式。

.row {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap:wrap;
        clear: both;
        margin: 0 auto;
        max-width: 100%;
        height: 100%;
        padding: 0;
    }