您的位置：首页 > 网站优化 > css  >  CSS3 flex-shrink属性用法详解

CSS3 flex-shrink属性用法详解

 更新时间：2017年7月6日 23:13  点击：2043
下面本文章来给各位介绍一下CSS3 flex-shrink使用方法，希望例子能帮助到各位。

flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。
flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，flex items们根据自身的flex-basis值做相应调整。

看一个示例：

 代码如下 复制代码
<div class='example-Grid'>
  <div class='example-first'>汇成一道道光的流河</div>
  <div class='example-last'>我曾在天上见过地的繁华</div>
</div>
<style>
.example-Grid{
  display: flex;
  border: 2px solid black;
  width: 250px;
}
.example-first{
  background: red;
  flex-basis: 150px;
  flex-shrink: 1;
}
.example-last{
  background:orange;
  flex-basis: 200px;
  flex-shrink:1;
}
</style>

CSS3 flex-shrink属性用法详解

在上面的代码中，flex container宽度为250px，而两个flex item宽度加起来有350px，所以要腾100px空间出来。
计算的方式是，每个flex item的flex-basis值乘以flex-shrink值求积，求和所有flex items的乘积，然后求占比，再乘以要腾出的空间。

 代码如下 复制代码
.example-first: (150 * 1) / ((200 * 1) + (150 * 1)) * 100 = 42.8571428571
.exampel-last: (200 * 1) / ((200 * 1) + (150 * 1)) * 100 = 57.1428571429

所以.example-first的宽度为150 – 42.8571428571 = 107px，.example-last的宽度为200 – 57.1428571429 = 143px。

[!--infotagslink--]

相关文章

  • 浅谈C# 字段和属性

    这篇文章主要介绍了C# 字段和属性的的相关资料，文中示例代码非常详细，供大家参考和学习，感兴趣的朋友可以了解下...2020-11-03

  • C#中using的三种用法

    using 指令有两个用途： 允许在命名空间中使用类型，以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围，将在此...2020-06-25

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。...2013-10-19

  • Vue之计算属性详解

    这篇文章主要为大家介绍了Vue的计算属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助...2021-11-16

  • iscroll.js 用法介绍

    最新版下载： http://www.csdn123.com/uploadfile/2015/0428/20150428062734485.zip 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生...2016-05-19

  • C# Dynamic关键字之:调用属性、方法、字段的实现方法

    本篇文章是对C#中调用属性、方法、字段的实现方法进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • C++中cin的用法详细

    这篇文章主要介绍了C++中cin的用法详细,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-25

  • C#中的try catch finally用法分析

    这篇文章主要介绍了C#中的try catch finally用法,以实例形式分析了try catch finally针对错误处理时的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 关于vue属性使用和不使用冒号的区别说明

    这篇文章主要介绍了关于vue属性使用和不使用冒号的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-22

  • 示例详解react中useState的用法

    useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧...2021-06-04

  • PHP中print_r、var_export、var_dump用法介绍

    文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法，有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25

  • 详解jquery方法属性

    这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-11-10

  • php中php://input的用法详细

    在使用xml-rpc的时候，server端获取client数据，主要是通过php输入流input，而不是$_POST数组。所以，这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25

  • 在Vue中获取自定义属性方法:data-id的实例

    这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09

  • MySQL中的主键以及设置其自增的用法教程

    1、声明主键的方法： 您可以在创建表的时候就为表加上主键，如： CREATE TABLE tbl_name ([字段描述省略...], PRIMARY KEY(index_col_name)); 也可以更新表结构时为表加上主键，如： ALTER TABLE tbl_name ADD PRIMARY KEY (in...2015-11-24

  • C#中this的用法集锦

    本文给大家汇总介绍了C#中的几种this用法，相信大家应该有用过，但你用过几种？以下是个人总结的this几种用法，欢迎大家拍砖，废话少说，直接列出用法及相关代码。...2020-06-25

  • C# 列表List的常用属性和方法介绍

    这篇文章主要介绍了C# 列表List的常用属性和方法介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-12

  • Delphi常用关键字用法详解

    这篇文章主要介绍了Delphi常用关键字用法,包括了各个常用的关键字及其详细用法,需要的朋友可以参考下...2020-06-30

  • C#类中属性与成员变量的使用小结

    本篇文章主要是对C#类中属性与成员变量的使用进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助...2020-06-25

  • angularjs循环对象属性实现动态列的思路详解

    这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-11-02