Flex grid not resizing for @media queries

问题

I cannot figure out why my 4 column (flexbox) grid doesn't resize when using @media queries. I have my code here: 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;
}

To change the layout I've been using the following code but the layout stays exactly the same. I want a 2 column layout for tablets/iPad and 1 column for smartphones:

/* 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; }

}

回答1:

Consider adding flex-wrap: wrap to your flex container (.row). The default setting for a flex container is flex-wrap: nowrap and all flex items will stay on the same line.

5.2. Flex Line Wrapping: the flex-wrap property

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

nowrap (initial value)

The flex container is single-line.

wrap

The flex container is multi-line.

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

Separately, you are using float and clear properties in your flex container. Note that these properties are ignored and can be safely removed.

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

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout: floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

float and clear have no effect on a flex item, and do not take it out-of-flow.

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

回答2:

Pleas add the flex-wrap property to the .row class.

.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;
    }

Please see here the complete guidelines of flex boxes .

来源：https://stackoverflow.com/questions/35699289/flex-grid-not-resizing-for-media-queries

标签

css

css3

flexbox