flex布局设置width无效

今天做项目遇到一个这样的问题,
在这里插入图片描述
页面的一部分内容是这样的,因为用到的是ant design mobile组件库,这里
我才用的是ant组件库里面的flex布局,但是在ant组件库的flex布局,不像栅格布局那样,自己可以定义每行的列数,因为在ant组件库中一行flex布局的列数是由 <Flex.Item>的多少来决定的,不换行,
在这里插入图片描述
在官网组件库里面看到了这个属性,于是就想给每个子元素的宽度为父元素的33.33%,设置成换行,应该就可以了吧,但是设置之后,发现设置的width不起作用,后来进行一步一步调试,发现了问题出现在哪里了,是因为子元素设置了一个flex属性,flex:1 1,flex扩张因子导致了width不起作用,于是就想把flex的扩张因子设置成0,就是把flex设置成flex:0 1 应该就行了吧,设置之后还是不行,于是在百度上面查找一下解决方法,于是找到了这篇完美解决了问题,
flex布局设置width无效
设置flex:0 0 需要设置的宽度,
还记得在校招的时候,面试北森云前端的时候,就出了一道这样的题目:flex:1 0 给一个宽度,具体宽度忘了,然后让我说最后的效果,没回答上来,因为平时用到的flex一般只用一个属性,其他的属性,很少用,平时遇到问题,自己也就百度查一下,很少记这些属性的具体用法,有时候记住了理解了,后来时间长了不怎么用了,就又忘了,今天遇到这样的问题,一会还得需要把flex属性在看一下啊。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值