前言
有个布局需求:父级容器,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
的宽度一样