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:

    

        
ONE
        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.
    
    

        
TWO
        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.
    
    

        
THREE
        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.
    
    

        
FOUR
        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.
    

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/