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/