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>

猜你喜欢

转载自blog.csdn.net/qq_38698753/article/details/80518912