flex 布局

来源：互联网发布：网络推广软件三尾狐编辑：程序博客网时间：2024/05/29 19:17

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;') 删除

阅读全文

0 0