css - Flex 网格不为@media 查询调整大小

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 flex 盒子的完整指南。