浅谈flex:1

flex是基于一个轴线上的布局。
只有父容器设置了display:flex;子容器的flex: 1才会生效。
其中,这个flex:1其实隐含了三个属性

1、flex-grow拉伸因子(默认值:0)
2、flex-shrink收缩规则(默认值:1)
3、flex-basis伸缩基数(默认值: auto)

先说第一个flex-grow拉伸因子,当子容器的宽度相加小于父容器,就会产生剩余空间,那么剩余空间将会按照比例分给子容器。(这个属性只在父容器有剩余空间时才生效)

第二个flex-shrink收缩规则,是当子容器的宽度相加大于父容器时,这时会产生一个缺少的空间,(子元素默认超出父容器是不会换行的,因为flex-wrap默认值为auto),因此按照flex-shrink的值,子容器会等比进行收缩。

第三个flex-basis伸缩基数,也可以近似当作子容器的宽度width,只不过flex-basis的优先级会高于width(注意:这两个中有一个是auto,另一个非auto的优先级会更高)

因此,说了这么多,其实flex:1,它代表的就是

flex:1 = flex: 1 1 0%;
即	flex-grow:1
	flex-shrink:1
	flex-basis: 0%

在浏览器中也可以看到
在这里插入图片描述

那么问题又来了,为什么flex:1里面的1代表的是flex-grow呢?
其实
1、当flex的值为非负数字是,只有一个时,它就代表flex-grow,有两个就依次代表flex-grow和flex-shrink。
(举个🌰 flex:1 2;就等于flex-grow:1,flex-shrink:2)
2、当flex的值为百分比(%)或者长度(px,em…)时,它就代表flex-basis的值
(举个🌰 flex:10%; flex: 100px;分别代表flex-basis:10%和flex-basis:100px)
当然flex的值不止以上两种情况,还有none,auto。。。。

以上是对flex:1比较浅的理解,如果错误的地方请指正。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值