CSS：flex布局中的flex-grow详解
flex布局概念：
⽗级元素称为：容器（container）
容器⼦元素成为：项⽬（item）
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
flex-grow：这是项⽬的⼀个属性，定义了项⽬的放⼤⽐例，如果为0，即使有剩余空间也不会放⼤。
解决的问题：空间有多余时把多余空间分配给各个⼦元素（项⽬）。
通俗理解：以上⾯代码做说明，container有1800px宽度，6个box（item）分别为200px，那么container剩余的宽度则为 600px，flex-grow就是⽤来设置box怎样⽠分剩余空间（宽度）。
flex-grow取值为⾮负数（注：如果取值为负数那么和0的取值效果相同）。
默认情况
box的flex-grow默认值为0
<style>
.container {
background-color: #999;
margin: 20px;
padding: 20px 0;
display: flex;
width: 1800px;
}
.box {
width: 200px;
height: 100px;
font-size: 50px;
text-align: center;
color: #F00;
}
</style>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
效果如下：
1. 取正整数
概念：将所有正整数相加得到分母sum，每个属性的数值作为分⼦，然后乘以剩余空间。
公式：分之/分母*剩余空间
例⼦1：
.box1,
.box2,
.box3 {
flex-grow:1
}
剩余宽度的分母：sum=1+1+1=3
box1分到的宽度：1/3*600px=200px
box2分到的宽度：1/3*600px=200px
box3分到的宽度：1/3*600px=200px
box1-box6的宽度分别为：400px、400px、400px、200px、200px、200px
例⼦2：
.box1 {
flex-grow:1
}
.box2 {
flex-grow:2
}
.box3 {
flex-grow:3
}
剩余宽度的分母：sum=1+2+3=6
box1分到的宽度：1/6*600px=100px
box2分到的宽度：1/3*600px=200px
box3分到的宽度：1/2*600px=300px
box1-box6的宽度分别为：300px、400px、500px、200px、200px、200px
2. 取⼩数
概念：⼩数乘以剩余空间。
公式：⼩数*剩余空间
例⼦：
.box1 {
flex-grow: 0.1
}
.
box2 {
flex-grow: 0.2
}
box1分到的宽度：0.1*600px=60px
box2分到的宽度：0.2*600px=120px
剩余的宽度 600-（60+120）= 420 没有使⽤
box1-box6的宽度分别为：260px、320px、200px、200px、200px、200px
3. ⼩数+正整数
计算⽅式与正整数⼀样，如分母取值：sum=0.1+0.2+1=1.3，分⼦分别为：0.1/1.3、0.2/1.3、1/1.3参考⽂章：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论