Getting absolutely positioned links to display in line with flexbox - css

Question

I got three absolutely positioned links. How do I display them next to one another? They should always be centered on the page so if one link is removed, the remaining two will center.
http://jsfiddle.net/Nk8YT/3/
HTML:
<header>
<div class="buttons">
<!-- Looks like this won't work:
Email
Guestbook
Donate-->
<!-- Instead we have to wrap them in "cells": -->
<div>
Email
</div>
<div>
Guestbook
</div>
<div>
Donate
</div>
</div>
</header>
<p>...</p>
CSS:
header {
position: fixed;
width: 100%;
top: 0;
}
header .buttons {
width: 100%;
text-align: center;
top: 20px;
}
header .buttons, header .buttons > div {
display: flex;
}
header .buttons a, header .buttons a:after {
position: absolute;
}
header .buttons a {
text-indent: -999px;
height: 50px;
width: 50px;
background: white;
border: 1px solid black;
}
header .buttons a:after {
position: absolute;
content:"";
top: 0;
left: 0;
height: 50px;
width: 50px;
}
header .buttons .email:after {
background: url(http://www.animatedgif.net/email/anim0005-1_e0.gif) no-repeat;
}
header .buttons .guestbook:after {
background: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif) no-repeat;
}
header .buttons .donate:after {
background: url(http://www.animatedgif.net/money/10rotate_e0.gif) no-repeat;
}

Answer 1

First off, you forgot to position your buttons, this is why your pseudo elements are overlapping each other. So add:
header .buttons a{
position: relative;
}
To center them, use justify-content on the flex container:
header .buttons{
justify-content: center;
}
http://jsfiddle.net/DnvXt/
Second, are flexible boxes necessary here? Because your buttons have fixed sizes, they don't appear to need flexing, do they? Try resizing the window, make it smaller, and you'll see that they will shrink. To prevent that you can do flex: none;, but then what's the point of using flex? :)
(without flex: http://jsfiddle.net/bXdGF)