CSS3 Flexbox中flex-shrink属性的用法

在CSS3 Flexbox中flex-shrink属性定义为:

This <number> component sets ‘flex-shrink’ longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to ‘1’. The flex shrink factor is multiplied by the flex basis when distributing negative space.

通俗来讲就是当flex items的大小超过了flex container时, 各个flex item的压缩比例, 请看下面的示例:


<style>

  #container div {
    height: 200px;
    width: 60px;
   }
  #test1 {
    background-color: blue;
    flex-shrink: 1;
  }
  #test2 {
    background-color: yellow;
    flex-shrink: 0.5;

  }

</style>

<div id="container">
    <div id="test1"></div>
    <div id="test2"></div>
  </div>

<div id="test1">与<div id="test2">的宽度总和是120px, 超过了<div id="container">的宽度100px, 超过的大小为20px, 那么container为了装下两个子div,两个子div的宽度就必须减少20px,那么每个子div的宽度减少多少呢? 这个时候就需要flex-shrink属性来分配了,每个子div的实际显示宽度计算方法公式为:

         实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)

根据上面的公式我们可以计算出<div id="test1">与<div id="test2">的实际宽度值分别为:

<div id="test1">: width = 60 - 20 * 1 / (1 + 0.5) = 47px

<div id="test2">: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px

根据以上结果可知flex-shrink值越大,flex item的实际结果就会越小

参考链接: 

1: http://www.w3.org/TR/css3-flexbox/#flex-shrink

2: http://www.w3.org/TR/css3-flexbox/#flex-shrink-factor

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3flexbox布局是一种非常强大的布局方式,可以通过一些属性来实现弹性伸缩和对齐。其flex-grow、flex-shrinkflex-basis就是控制弹性伸缩的重要属性flex-grow 属性 flex-grow 属性用于指定元素在弹性容器的伸展比率,即当元素所在容器有剩余空间时,元素按照比例分配剩余空间。默认值为 0,即当剩余空间不足时,元素不会伸展。 例如,当一个容器有两个元素,一个 flex-grow 值为 1,另一个为 2,则第二个元素在容器有剩余空间时会比第一个元素多分配一倍的剩余空间。 flex-shrink 属性 flex-shrink 属性用于指定元素在弹性容器的收缩比率,即当元素所在容器空间不足时,元素按照比例收缩。默认值为 1,即元素会自动收缩。 例如,当一个容器有两个元素,一个 flex-shrink 值为 1,另一个为 2,则第二个元素在容器空间不足时会比第一个元素多收缩一倍。 非常重要的一点是,如果所有元素的 flex-shrink 属性值都为 0,则它们不会收缩。 flex-basis 属性 flex-basis 属性用于指定元素在弹性容器的基准值,即元素在不伸展或收缩的情况下所占据的空间。默认值为 auto,即元素的大小由其本身的大小决定。 例如,当一个容器有两个元素,一个 flex-basis 值为 100px,另一个为 200px,则第一个元素在不伸展或收缩的情况下会占据 100px 的空间。 综合运用 这三个属性通常一起使用,例如: flex: 1 0 auto; 这个属性的意思是元素在弹性容器会按照 flex-grow 属性的比例伸展,但不会收缩,基准值由 flex-basis 决定。 总结 flex-grow、flex-shrinkflex-basis 这三个属性是控制 flexbox 布局弹性伸缩的重要属性,非常方便实用。熟练掌握它们的使用可以让我们更好地控制弹性布局,实现更加灵活的网页布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值