How to control number of items per row using media queries in Flexbox?

Answer 1

I have found a better solution for restricting the number of columns in a row in different devices without using media queries:

HTML:

<div class="flex-container">
    <div class="item">
        <h3>ONE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>TWO</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>THREE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>FOUR</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
</div>

CSS:

.flex-container {
        display: flex;
        flex-wrap: wrap;
}
.item {
        box-sizing: border-box;
        flex: 1 0 250px;
        margin: 1rem;
        padding: 1rem;
        border: 1px solid #000;
        border-radius: 5px;
}

Codepen link: https://codepen.io/bala285/pen/YzqpLod

Source: https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/

Answer 2

I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 :

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
}
.item {
    background-color: tomato;
    box-sizing: border-box;
    padding: 20px;
    outline: 2px solid blue;
    flex: 1;
}

@include max-width(992px) {
    .item {
        flex-basis: 25%;
        background-color: red;
    }
}

@include max-width(640px) {
    .item {
        flex-basis: 50%;
        background-color: green;
    }
}

The important parts here are:

• flex-flow: row wrap which allows the flexbox to appear on multiple rows (the default is nowrap)

• flex-basis which is the equivalent of width in this case

• position: relative which makes the widths relative to the container, rather than the body (this would screw up the rounding)