flex flow media queries

multiple responsive column layouts within a single flex container.

by Soviut

HTML

<body>
    <header>
        <h1>Responsive Flexbox</h1>
        <p>Multiple responsive column layouts within a single flexbox container. Resize the browser to watch the breakpoints happen for each column size.</p>
    </header>
    
    <div class="layout">
        <div class="layout__item layout__item--whole">whole</div>

        <div class="layout__item layout__item--half">half</div>
        <div class="layout__item layout__item--half">half</div>

        <div class="layout__item layout__item--third">third</div>
        <div class="layout__item layout__item--third">third</div>
        <div class="layout__item layout__item--third">third</div>

        <div class="layout__item layout__item--quarter">quarter</div>
        <div class="layout__item layout__item--quarter">quarter</div>
        <div class="layout__item layout__item--quarter">quarter</div>
        <div class="layout__item layout__item--quarter">quarter</div>
    </div>
</body>

CSS

* {
    box-sizing: border-box;
    font-family: arial, helvetica, san-serif;
    font-size: 1em;
}

header {
    min-height: 150px;
    max-width: 500px;
    
    font-size: 0.9em;
}

h1 {
    font-size: 2em;
}

.layout {
    display: flex;
    flex-flow: row wrap;
}

.layout__item {
    padding: 10px;
    
    overflow: hidden;
    background: #444;
    border: solid 1px #CCC;
}

.layout__item--whole {
    width: 100%;
}

.layout__item--half {
    width: 50%;

    background: #666;
}

@media screen and (max-width: 480px) {
    .layout__item--half {
        width: 100%;
    }
}

.layout__item--third {
    width: 33.333%;
    
    background: #888;
}

@media screen and (max-width: 480px) {
    .layout__item--third {
        width: 100%;
    }
}

.layout__item--quarter {
    width: 25%;
    
    background: #AAA;
}

@media screen and (max-width: 720px) {
    .layout__item--quarter {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .layout__item--quarter {
        width: 100%;
    }
}