Left aligned and centered grid with flexbox

Question

I\'d like to implement a responsive grid-like layout using flexbox (without media queries). There can be variable number of elements in the grid. Each item should have fixed

Answer 1

Basically, you should structure your page to have default margins to the left and the right. Use percentages, rather than widths in pixels. That way it will be responsive and should look just as good all devices. If you want to add a max width you can of course do that. This will give pretty much the result you wanted originally. With no Javascript. I removed two lines from the .container css as well. Since your handling padding and margins in the items themselves.

.pageLayout {
    margin: 0 auto;
    width: 80%;
    /* add optional max width  */
}

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 200px;
  width: 200px;
  background-color: purple;
  padding: 10px;
  margin: 10px;
}

  

    
Flex item 1
    
Flex item 2
    
Flex item 3
    
Flex item 4
    
Flex item 5