您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
flex布局学习笔记之flex-shrink与flex-basis
发布时间：2018-04-10 17:14:52编辑：雪饮阅读（）
(1)在使用flex布局中,若父级元素内容不足以容下所有子元素,那么每个子元素就会默认进行缩小,而flex-shrink可以为每个子元素定义缩小权重。flex-shrink默认值为1.
如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
通俗的来说就是对超过父级的部分按照每个子元素的权重来分配，然后用自己定义的尺寸减去给自己分配的部分，剩下的才是自己缩放后的真实尺寸。
(2) 在flex布局中flex-basis其实就是一个容器的基准尺寸。
flex-basis和width的关系：
只是当flex-basis设置为auto且width不为auto时，计算flex-basis的used size时会用到width。
如下实例就是给第一个div设置权重10，另外两个div设置权重分别为1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
display: flex;
width:800px;
}
#box1{
background:pink;
flex-basis:800px;
/*width:800px;*/
height:100px;
flex-shrink:10;
}
#box2{
flex-shrink:1;
background:green;
flex-basis:100px;
/*width:100px;*/
}
#box3{
flex-shrink:1;
background:blue;
flex-basis:100px;
/*width:100px;*/
height:100px;
}
</style>
</head>
<body>
<div id="box1">第一个盒子</div>
<div id="box2">第二个盒子</div>
<div id="box3">第三个盒子</div>
</body>
</html>
关键字词：flex,shrink,basis
下一篇：flex布局学习笔记之flex