如何使用flex布局，实现三个div垂直居中布局

前言

有个布局需求：父级容器， class为szb-left-menu，里面有三个div，希望能实现下图的排列效果：

如何用flex实现类似的效果呢？

代码

话不多说，父级容器的样式代码如下所示：

.szb-left-menu {
    position: absolute;
    z-index: 9999;
    top: 100px;
    left: 28px;
    height: calc(100% - 150px);
    display: flex;
    flex-flow: row wrap;
    width: 70px;
    align-content: space-between;
}

注意：父级容器的height和width是必须设置的，且width需与子div的宽度一样