Flexbox填充不均匀分布

Question

嘿伙计们我使用flexbox来创建一个简单的效果，现在我有以下HTML：

<div class="main">
            <a class="info-boxes">
                <h5>2200AED</h5>
                <p>5 Private Sessions / Validity: 2 Months</p>
                <span>Online Booking</span>
            </a>

            <a class="info-boxes"></a>
            <a class="info-boxes"></a>
</div>

以下CSS：

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700,900);


/* global css */

body {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    padding: 0;
    margin: 0;
}

.info-boxes {
    width: 33.33%;
    display: flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    background: #f5989d;
    padding: 0.5em 0;
}


.info-boxes h5 {
    font-size: 30px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
}

.info-boxes span {
    position: relative;
    font-weight: 700;
}

.info-boxes span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(100% + 10px );
    width: 100%;
    height: 1px;
    background: #fff;
}

.info-boxes span:after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 10px );
    width: 100%;
    height: 1px;
    background: #fff;
}

现在，以下填充线应用于主要父级，以便孩子们不会粘在顶部或底部：

padding: 0.5em 0;

现在导致垂直对齐中断，看起来填充也不均匀分布。为什么？

interp1