How to center align a grid of divs in a flex container?

Question

I am trying to centre align the 3 column grid (which is made up of 6 flex- items) placed in a flex-container div. (Refer to image attached

Answer 1

You can use justify-content on the flex container to align items over its main axis. Take a look at this example: https://jsfiddle.net/eL650y3e/

Sources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I would try setting margin:auto; `

.flex-item {
    width: 23%;
    height: 360px;
    margin: 10px;
    order: 1;
    border-radius: 3px;
    padding: 0 10px 40px 10px;
    margin:auto;
}`