flex布局技巧

如果使用了display：flex，flex-direction为row时，常规的使用float：right并不能使所想要的元素靠最右边，如果想最后的元素靠右，在倒数第二个元素上加上margin-right：auto。

html代码：<div class="manualBar">
<button class="layui-btn layui-btn-sm layui-btn-primary addNew animated bounceInLeft"><i class="layui-icon"style="font-size: 30px; color: #666666;">&#xe61f;</i> 新增</button>
<button data-type="deleteFormData" class="layui-btn layui-btn-sm layui-btn-danger deleData animated bounceInLeft"><i class="layui-icon">&#xe640;</i> 删除</button>
<button class="authorize layui-btn layui-btn-sm layui-btn-primary animated bounceInLeft"><i class="layui-icon"style="font-size: 30px; color: #666666;">&#xe614;</i> 权限管理</button>
<!--<span style="margin-left:20px;margin-right: 15px;margin-top: 6px;">选择用户组</span>
<select name="" id="switchGroup" class="">

</select>-->

</div>

css代码：

<style type="text/css">
.manualBar {
display: flex;
margin-top: 15px;
}

.switchGroup {
float: right;
}
.deleData{
margin-right: auto;
}
</style>