flex弹性布局中justify-content:space-between 不起作用
Posted 杨晓风-linda
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex弹性布局中justify-content:space-between 不起作用相关的知识,希望对你有一定的参考价值。
需求
商品卡片价格与加购按钮如下分布:
实际效果
技术方案
display: flex;
flex-direction: row;
justify-content: space-between;
解决思路
1.如果有margin:0 auto, 去掉即可
2.设置宽度width
解决方案
本身已经设置了margin,继而设置宽度width,问题解决,在设置width的时候有两种方式:
1.固定值
2.width:inherit (继承)
根据具体业务需求,可进行设置
以上是关于flex弹性布局中justify-content:space-between 不起作用的主要内容,如果未能解决你的问题,请参考以下文章
flex弹性布局中justify-content:space-between 不起作用
flex弹性布局中justify-content:space-between 不起作用
CSS3弹性布局中的justify-contentflex-direction的有机组合
第二节 弹性盒子( justify-content属性align-items属性flex-direction属性flex-wrap属性)