If You’re Using Flexbox

Flexbox? I adore it – it makes so many headaches of the early teens a mere memory. A lot of the designers I work with design with the capabilities of flexbox in mind. One of the niftiest features? Setting a parent el to display=flex and then setting its children to margin=auto. It’s a miracle – content is automatically centered both horizontally and vertically. And the great thing about flexbox is that there are multiple ways to vertically align content – and most tuts mention that its all a matter of preference. I however graviated to the method described above because it requires the least code and margins are an old friend, as opposed to the flexbox properties which can be scary to a dev less versed in flexbox. However if you’ve ever crosss browser tested after using margin=auto – you may discover as I have, IE is not a fan. Nope, to avoid the headache that is inevitable when looking at flexy site in IE, vertically align text like so:

.parent {
display: flex;
justify-content: center;
align-items: center;

.parent > * {
// margin: auto // – dont do this, IE hates it! more info here: https://stackoverflow.com/questions/37534254/flex-auto-margin-not-working-in-ie10-11