Flexbox – Absolute centre when 3, or more, elements on one line

Issue Description

When a flex container has 3 child elements, the middle element isn’t in the dead centre of the container.

How to Fix the Issue

Full detail is in the Stack Overflow answer, but, essentially, the elements inside the flex container should also be flex elements with ‘flex: 1’ added to them.

Usually this requires adding a ‘wrap’ div or span around the children so they can retain their styling without affecting how they already look.

References