flex 布局

1.justify-content  配合  align-item

         .filter-bar.allCenter(style='display:flex;')
             .left
               a.item-link.allCenter#clear(href='#',style='display:flex;align-items: center;width:100%;height:100%;justify-content:center;font-size:16px;')
                 span 清空
             .filter-line
             .right
               a.item-link.allCenter#filter(href='#',style='display:flex;align-items: center;width:100%;height:100%;justify-content:center;font-size:16px;') 
                 span 确定

效果图如下：

2.wrap的使用

          .box(style='display:flex;flex-wrap: wrap;')
            .gjr(style='width:33.3%')
              .circle(style='height:45px;display:flex;justify-content:center;')
                .ccc(style='width:45px;height:100%;border-radius:50%;background-color:#cccccc;')
              p(style='font-size: 16px;color: #999999;text-align:center;height:22px;line-height:22px;margin-top:11px;margin-bottom:0px;') 章三
            .gjr(style='width:33.3%')
              .circle(style='height:45px;display:flex;justify-content:center;')
                .ccc(style='width:45px;height:100%;border-radius:50%;background-color:#cccccc;')
              p(style='font-size: 16px;color: #999999;text-align:center;height:22px;line-height:22px;margin-top:11px;margin-bottom:0px;') 章三
            .gjr(style='width:33.3%')
              .circle(style='height:45px;display:flex;justify-content:center;')
                .ccc(style='width:45px;height:100%;border-radius:50%;background-color:#cccccc;')
              p(style='font-size: 16px;color: #999999;text-align:center;height:22px;line-height:22px;margin-top:11px;margin-bottom:0px;') 章三              
            .gjr(style='width:33.3%')
              .circle(style='height:45px;display:flex;justify-content:center;')
                .ccc(style='width:45px;height:100%;border-radius:50%;border:3px solid #ececec;text-align:center;line-height:39px;box-sizing:border-box;')
                  i.iconfont.icon-Smile_123
              p(style='font-size: 16px;color: #999999;text-align:center;height:22px;line-height:22px;margin-top:11px;margin-bottom:0px;') 添加
            .gjr(style='width:33.3%')
              .circle(style='height:45px;display:flex;justify-content:center;')
                .ccc(style='width:45px;height:100%;border-radius:50%;border:3px solid #ececec;text-align:center;line-height:39px;box-sizing:border-box;')
                  i.iconfont.icon-Smile_123
              p(style='font-size: 16px;color: #999999;text-align:center;height:22px;line-height:22px;margin-top:11px;margin-bottom:0px;') 删除