获得绝对定位的链接，以显示与flexbox一致

Question

我有三个绝对定位的链接。我如何把它们放在一起显示呢?它们应该始终处于页面的中心位置，这样如果一个链接被删除，剩下的两个链接将会居中。

http://jsfiddle.net/Nk8YT/3/

HTML:

<header>
    <div class="buttons">
        <!-- Looks like this won't work:
        <a href="#" class="email">Email</a>
        <a href="#" class="guestbook">Guestbook</a>
        <a href="#" class="donate">Donate</a>-->
        <!-- Instead we have to wrap them in "cells": -->
        <div>
          <a href="#" class="email">Email</a>
        </div>
        <div>
          <a href="#" class="guestbook">Guestbook</a>
        </div>
        <div>
          <a href="#" class="donate">Donate</a>
        </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

首先，您忘记了按钮的位置，这就是为什么您的伪元素相互重叠。所以添加:

header .buttons a{
  position: relative;
}

居中，使用justify-content在伸缩容器:

header .buttons{
  justify-content: center;
}

http://jsfiddle.net/DnvXt/

---

第二，这里需要灵活的盒子吗?因为你的按钮有固定的大小，它们似乎不需要弯曲，不是吗?尝试调整窗口大小，使其变小，您将看到它们会缩小。为了防止这种情况，你可以使用flex: none;，但使用flex的意义是什么?:)

(无flex: http://jsfiddle.net/bXdGF)