当父元素用flex布局时,它的子元素可以用flex-grow、flex-shrink、flex-basis属性设置,父元素在不同宽度下,子元素是如何分配父元素空间的
flex-grow、flex-shrink、flex-basis三个属性的作用:
flex-grow: 当父元素的宽度大于里面的子元素宽度,就是父元素有剩余宽度,或是子元素想分配父元素的剩余宽度,就可以用此属性设置。flex-grow
的默认值为0,意思是该元素不分配父元素的剩余空间,如果值大于0,表示索取。值越大,分配的越多。
假如:父元素宽400px,有两个子元素:A和B。A宽为100px,B宽为200px。 则空余空间为 400-(100+200)= 100px。 如果A,B都不索取剩余空间,则有100px的空余空间。
两者其中一个分配剩余空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.firstBox{
width: 400px;
height: 400px;
display: flex;
background-color: blue;
}
.left{
width: 100px;
height: 300px;
background-color: red;
}
.right{
width: 200px;
height: 300px;
background-color: yellowgreen;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="firstBox">
<div class="left">左子元素</div>
<div class="right">右子元素</div>
</div>
</body>
</html>
当两个都想分配空间,flex-grow都大于0时,就按比例划分剩余空间,
如果A,B都设索取剩余空间,A设置flex-grow为1,B设置flex-grow为2。则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px (2/(1+2)))
flex-shrink:该属性用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。 flex-shrink
的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.firstBox{
width: 400px;
height: 400px;
display: flex;
background-color: blue;
}
.left{
width: 300px;
height: 300px;
background-color: red;
/* flex-grow: 1; */
flex-shrink:0;
}
.right{
width: 200px;
height: 300px;
background-color: yellowgreen;
/* flex-grow: 1; */
flex-shrink:0;
}
</style>
</head>
<body>
<div class="firstBox">
<div class="left">左子元素</div>
<div class="right">右子元素</div>
<!-- 父元素 -->
</div>
</body>
</html>
设为1时不超出
flex-basis:该属性用来设置元素的宽度,大家都知道用width设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。
如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.firstBox{
width: 400px;
height: 400px;
display: flex;
background-color: blue;
}
.first{
width: 400px;
height: 300px;
flex-basis: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="firstBox">
<div class="first">里面子元素</div>
</div>
</body>
</html>
flex是flex-grow,flex-shrink, flex-basis 的缩写规则:
flex
取值为 none
,则计算值为 0 0 auto
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
当 flex取值为 auto,则计算值为 1 1 auto
当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%
如上就是这三个属性常见的用法