在el-form-item中写了一个包含两个按钮的按钮组,需要居右对齐,使用justify-content:flex-end不起效,经检查问题在于el-form-item下面自动生成的.el-form-item__content样式中包含一句:
.el-form-item__content {
flex:1
}
所以导致justify-content不生效
解决办法是修改该类的flex属性,但在代码里直接对该类使用类选择器不行,因为这是element内部定义的类,不是我们定义的,所以需要用到深度选择器来检索该类:
/deep/ .el-form-item__content{
flex: unset
}
或者使用v-deep命令:
::v-deep .el-form-item__content{
flex: unset
}
两种方式均可修改.el-form-item__content样式,当然直接使用这种方式修改会对所有的.el-form-item__content造成影响,需要scoped或者子类选择来进行约束
结果:
按钮组成功居右对齐!
另外一种居右对齐的办法是使用float,但这并不会解决我们justify-conten失效的问题