WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

CSS 3 flex-shrink属性用法详解

更新时间:2014-07-22 12:17 作者:佚名点击:
下面本文章来给各位介绍一下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。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容