Flex 网格未针对 @media 查询调整大小

Question

我无法弄清楚为什么我的 4 列（弹性框）网格在使用 @media 查询时没有调整大小。我的代码在这里：https://jsfiddle.net/mrknz4a3/

.flexgrid-wrapper {
    width: 100%;
    border-collapse: collapse;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1% 0;
    margin: 2% 0 0;
}

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

.col_3 {
    width: 23%;
    margin: 0 2.7% 2.5% 0;
    float: left;
    word-break: break-word;
    background: pink;
}

要更改布局，我一直在使用以下代码，但布局保持完全相同。我想要平板电脑/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; }

}

Answer 1

请将 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;
    }

请参阅here 弹性盒子的完整指南。

Answer 2

考虑将flex-wrap: wrap 添加到您的弹性容器（.row）。弹性容器的默认设置是flex-wrap: nowrap，所有弹性项目都将保持在同一行。

5.2. Flex Line Wrapping: the flex-wrap property

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

nowrap（初始值）

flex 容器是单行的。

换行

flex 容器是多行的。

_{来源： https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property}

---

另外，您在 flex 容器中使用 float 和 clear 属性。请注意，这些属性会被忽略并且可以安全地删除。

3. Flex Containers: the flex and inline-flex display values

flex 容器建立一个新的 flex 格式化上下文 它的内容。这与建立块格式化相同 上下文，除了使用 flex 布局而不是块布局： floats 不会侵入 flex 容器，而 flex 容器的边距不会与其内容的边距一起折叠。

• float 和 clear 对 flex 项目没有影响，并且不要让它失去流动性。

_{来源： https://www.w3.org/TR/css-flexbox-1/#flex-containers}