By default, the flex items will try to fit in one line. To make items wrap into multiple lines, use:

.parent { 
   display: flex;
   flex-wrap: wrap; 
}

Then the items can have flex-basis

.child {  
    flex-basis: 33.33333 % // For 3 items in a row.
}

Note: Do not use the width property for the items.

Flexbox: Making “x” items per row
Tagged on:     

Sanjeev Aryal

Don't bury your thoughts, put your vision into reality ~ Bob Marley.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest