您的位置:首页> 前端教程> CSS3教程
文章导航

CSS flex-shrink

2019-4-12 17:46| 作者: admin| 查看: 932| 评论: 0|来自: 蚂蚁部落

关于弹性布局的总体介绍可以参阅display:flex 弹性布局一章节。

上述文章对弹性布局进行了概括性介绍,但过于简略,很多初学者难以理解。

本文专注于通过代码实例对其中属性之一flex-shrink进行详细介绍。

一.基础概念:

从"弹性布局"这个名称也可以看到,此布局方式可以做到"能屈能伸"。

关于"伸"的相关知识可以参阅CSS flex-grow 属性一章节。

flex-shrink属性则体现了弹性布局"屈"的一面,可以让项目尺寸收缩。

此属性规定容器中项目在主轴上的缩小比例,默认值为1。

需要特别注意如下几点:

(1).此属性应用于容器中的项目之上。

(2).必须容器主轴上的尺寸小于项目尺寸,才有可能缩小。

(3).属性值为0,表示项目部缩小。

(4).必须应用弹性布局环境中,否则无效。

语法结构:

[CSS] 纯文本查看 复制代码
flex-shrink: number|initial|inherit;

属性值说明:

(1).number:默认值是 1,容器中的项目相对于其他项目的搜索比率。

(2).initial:容器中的项目默认方式显示,可以参阅CSS initial 属性一章节。

(3).inherit:从父元素继承该属性。

也许对上面属性的阐述,不少朋友感觉不容易理解,这个完全不用担心。

文章的最后会有详细的代码实例,对属性的作用进行演示。

浏览器兼容:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).谷歌浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).safria浏览器不支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
#main {
  width:350px;
  height:100px;
  background:#ccc;
  display:flex;
}
#main div {
  flex-shrink:1;
  flex-basis:100px;
}
#main div:nth-of-type(2) {flex-shrink:3;}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:green;"></div>
</div>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/174825jf9v9jxfjapj3sn6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).外层div元素被设置为弹性布局,作为容器,宽度是350px。

(2).容器中有5个项目,通过flex-basis属性设置项目在主轴方位的尺寸为100px。

(3).5个项目的尺寸为500px,明显超过容器的350px。

(4).通过flex-shrink属性设置项目的伸缩比率,第二个是2,其他的为1。

(5).可以看到在主轴方位上的尺寸进行了伸缩,以适应容器的主轴方位的尺寸。

下面关键问题来了,如何去计算每一个项目的具体收缩的值,以上述代码为例子进行分析。

(1).容器尺寸是350px,项目总尺寸是500px,缺口150px。

(2).这150px的缺口需要5个项目区分担,每一个项目的分担的尺寸由flex-shrink属性值决定。

(3).flex-shrink属性值越大,那么分担的越多,按照属性值大小比例进行划分。

(4).计算方式是,将每一个项目的flex-shrink属性值相加,然后再按照比例进行计算。

第一个div承担缩小量:150*(1/7)

第二个div承担缩小量:150*(3/7)

第三个div承担缩小量:150*(1/7)

第四个div承担缩小量:150*(1/7)

第五个div承担缩小量:150*(1/7)

然后每一个项目减去承担的缩小量,就是最后实现的尺寸。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS align-items下一篇:CSS calc()

最新评论

返回顶部