我认为您想要以下内容。

html, body {

    height: 100%;

}

body {

    margin: 0;

}

.flex-container {

    height: 100%;

    padding: 0;

    margin: 0;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    justify-content: center;

}

.row {

    width: auto;

    border: 1px solid blue;

}

.flex-item {

    background-color: tomato;

    padding: 5px;

    width: 20px;

    height: 20px;

    margin: 10px;

    line-height: 20px;

    color: white;

    font-weight: bold;

    font-size: 2em;

    text-align: center;

}


<div class="flex-container">

    <div class="row">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

    </div>

</div>

你的.flex-item元素应该是块级（div而非span）如果你想要的高度和顶部/底部填充，以正常工作。

另外，在上.row，将宽度设置为auto而不是100%。

您的.flex-container属性很好。

如果您希望.row垂直居中于视口中，请为html和分配100％的高度body，然后将页body边距清零。

请注意，.flex-container需要一个高度才能看到垂直对齐效果，否则，容器会计算出包围内容所需的最小高度，该最小高度小于此示例中的视口高度。

附注：
本flex-flow，flex-direction，flex-wrap性能会犯这样的设计更容易实现。我认为.row不需要容器，除非您要在元素周围添加一些样式（背景图像，边框等）。