css - 获取绝对定位的链接以与 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;
}

要使它们居中，请在 flex 容器上使用 justify-content:

header .buttons{
  justify-content: center;
}

http://jsfiddle.net/DnvXt/

---

其次，这里需要灵活的盒子吗？因为您的按钮具有固定尺寸，所以它们似乎不需要 flex ，对吗？尝试调整窗口大小，将其变小，您会发现它们会缩小。为防止这种情况，您可以执行 flex: none;，但是使用 flex 有什么意义呢？ :)

(没有 flex :http://jsfiddle.net/bXdGF)