我认为您想要以下内容。
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 > <div > <div >1</div> <div >2</div> <div >3</div> <div >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不需要容器，除非您要在元素周围添加一些样式（背景图像，边框等）。
