Question

我无法弄清楚为什么我的4列（flexbox）网格在使用@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添加到您的Flex容器（.row）。 Flex容器的默认设置为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布局而不是块布局：   浮动不会侵入Flex容器和flex   容器的边距不会随其内容的边缘而崩溃。


float和clear对Flex项目没有任何影响，也不会将其从流量中删除。


<子>源：   https://www.w3.org/TR/css-flexbox-1/#flex-containers 的

Flex网格没有为@media查询调整大小

2 个答案: